'react-focus-lock' is deprecated

[yburshe]

Description

When I install the required npm packages

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

and then import ChakraProvider in App.js in my React app, I get the error

Module not found: Error: Can't resolve './Combination' in '/Users/yashburshe/Developer/food-allergy-app/node_modules/react-focus-lock/dist/es2015'
Did you mean 'Combination.js'?

Module not found: Error: Can't resolve './UI' in '/Users/yashburshe/Developer/food-allergy-app/client/node_modules/react-focus-lock/dist/es2015'
Did you mean 'UI.js'?

Npm warn exists as well

npm WARN deprecated react-focus-lock@2.12.0: incorrect ESM implementation

Link to Reproduction

https://codesandbox.io/p/sandbox/chakra-ui-javascript-lzzg9?file=%2Fsrc%2Findex.js

Steps to reproduce

1. Create-react-app
2. Npm install chakra-ui, emotion/react, emotion/styled, framer motion
3. Import ChakraProvider in App.js
4. Wrap ChakraProvider around everything (in my case, my own AuthProvider and inside that BrowserRouter)
5. Error occurs Module not found: Error: Can't resolve './Combination' in '/Users/yashburshe/Developer/food-allergy-app/node_modules/react-focus-lock/dist/es2015' Did you mean 'Combination.js'?

Chakra UI Version

2.8.2

Browser

Safari 17.4.1

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[st3fus]

Having the same exact issue. It breaks in build, but when the build is ran locally it doesn't break. Only in production

[prasad-kumkar]

Hope this helps: #8451 (comment)

[st3fus]

This helped me: react-focus-lock@2.12.1