Compatibility Issue with react-focus-lock in Next.js Projects

[prasad-kumkar]

Description

I'm encountering an "ERR_MODULE_NOT_FOUND" error in my Next.js project when using a component from @chakra-ui@2.8.2 or later that seems to rely on react-focus-lock. The specific error message is:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/workspaces/app/node_modules/react-focus-lock/dist/es2015/Combination' imported from /workspaces/app/node_modules/react-focus-lock/dist/es2015/index.js
    at finalizeResolution (node:internal/modules/esm/resolve:265:11)
    at moduleResolve (node:internal/modules/esm/resolve:933:10)
    at defaultResolve (node:internal/modules/esm/resolve:1157:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:390:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:359:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
    at link (node:internal/modules/esm/module_job:86:36) {
  code: 'ERR_MODULE_NOT_FOUND',
  url: 'file:///workspaces/app/node_modules/react-focus-lock/dist/es2015/Combination',
  page: '/'

Link to Reproduction

https://codesandbox.io/p/github/Reax-Finance/app/main

Steps to reproduce

@chakra-ui/react: 2.8.2 (and potentially in later versions)
react-focus-lock: Introduced by Chakra UI dependency.
next: 13.1.3
node: 20.x.x

Possible Cause:

I suspect a change introduced in @chakra-ui/react@2.8.2 and onwards might create a compatibility issue regarding module resolution of the react-focus-lock library, specifically with how Next.js handles module imports.

Chakra UI Version

2.8.2

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

Could you please investigate whether there is a fix or workaround for this issue? It would be greatly appreciated if Chakra UI could be made fully compatible with the latest versions of react-focus-lock for smoother development experiences with Next.js.

[izinin]

i suggest the development team to pine react-focus-lock version in @chakra-ui/focus-lock/package.json to 2.11.3 ( the previous one where no problems are seen ) and publish new release
Please note issue react-focus-lock/issues/303

[jomorais]

For the ones who can’t wait for a solution, I've override the version v2.12.0 by the 2.11.3 mentioned by @izinin in order to fix my build script, this is my temporary workaround:

your package.json:

{
	“dependencies”: {
          … your deps
        },
  	"overrides": {
    		"react-focus-lock": "2.11.3"
  	},
}

and reinstall your node_modules:

npm install

VSCode description for overrides:

Overrides is used to support selective version overrides using npm, which lets you define custom package versions or ranges inside your dependencies. For yarn, use resolutions instead. See: https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides

[izinin]

@jomorais : thank you very much for your help. it is working!

[prasad-kumkar]

downgrading react-focus-lock version worked. thank you @izinin @jomorais 🎉

Here's the changes i made in package.json

"resolutions": {
    "react-focus-lock": "2.9.6" 
 }

[abhishekchotaliya]

thanks @jomorais and @prasad-kumkar ,
after countless retries, mixing both approaches worked for me.

{
"dependencies": {
    "react-focus-lock": "2.9.6"
},
"overrides": {
    "react-focus-lock": "2.9.6"
},
"resolutions": {
    "react-focus-lock": "2.9.6"
}