react-focus-lock: ESM compatibility breaks WebPack build

https://github.com/theKashey/react-focus-lock/releases/tag/v2.12.0

Unfortunately the ESM compatibility update broke our WebPack build … I am investigating, but we have a pretty standard setup.


  ERROR in ./node_modules/react-focus-lock/dist/es2015/index.js 1:0-38
  Module not found: Error: Can't resolve './Combination' in '/PATH_TO_PROJECT/node_modules/react-focus-lock/dist/es2015'
  Did you mean 'Combination.js'?
  BREAKING CHANGE: The request './Combination' failed to resolve only because it was resolved as fully specified
  (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
  The extension in the request is mandatory for it to be fully specified.
  Add the extension to the request.
  resolve './Combination' in '/PATH_TO_PROJECT/node_modules/react-focus-lock/dist/es2015'
    using description file: /PATH_TO_PROJECT/node_modules/react-focus-lock/package.json (relative path: ./dist/es2015)
      Field 'browser' doesn't contain a valid alias configuration
      using description file: /PATH_TO_PROJECT/node_modules/react-focus-lock/package.json (relative path: ./dist/es2015/Combination)
        Field 'browser' doesn't contain a valid alias configuration
        /PATH_TO_PROJECT/node_modules/react-focus-lock/dist/es2015/Combination doesn't exist


  ERROR in ./node_modules/react-focus-lock/dist/es2015/index.js 2:0-21
  Module not found: Error: Can't resolve './UI' in '/PATH_TO_PROJECT/node_modules/react-focus-lock/dist/es2015'
  Did you mean 'UI.js'?
  BREAKING CHANGE: The request './UI' failed to resolve only because it was resolved as fully specified
  (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
  The extension in the request is mandatory for it to be fully specified.
  Add the extension to the request.
  resolve './UI' in '/PATH_TO_PROJECT/node_modules/react-focus-lock/dist/es2015'
    using description file: /PATH_TO_PROJECT/node_modules/react-focus-lock/package.json (relative path: ./dist/es2015)
      Field 'browser' doesn't contain a valid alias configuration
      using description file: /PATH_TO_PROJECT/node_modules/react-focus-lock/package.json (relative path: ./dist/es2015/UI)
        Field 'browser' doesn't contain a valid alias configuration
        /PATH_TO_PROJECT/node_modules/react-focus-lock/dist/es2015/UI doesn't exist

About this issue

Original URL
State: open
Created 2 months ago
Reactions: 13
Comments: 16 (3 by maintainers)

Commits related to this issue

fix: correct ESM implemenation, fixes #301 — committed to theKashey/react-focus-lock by theKashey 2 months ago
fix error originating from react-focus-lock within chakra due to package breaking ESM breaking WebPack build https://github.com/theKashey/react-focus-lock/issues/301 — committed to henrybabbage/pukauae by henrybabbage 2 months ago

Most upvoted comments

I’m facing the same issue

+11

Harsh7wardhan on Apr 20, 2024

@Harsh7wardhan in your package.json, add the following:

  "overrides": {
    "@chakra-ui/focus-lock": {
      "react-focus-lock": "2.11.3"
    }
  }

danielweck on Apr 21, 2024

Looks like same problem here. I have NextJS project, which uses esbuild, and once I ran updates today, trying to start project gives following error:

 ○ Compiling / ...
 ✓ Compiled / in 2s (1391 modules)
 ⨯ Error [ERR_MODULE_NOT_FOUND]: Cannot find module './node_modules/react-focus-lock/dist/es2015/Combination' imported from ./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:///home/{exact-path-removed}/node_modules/react-focus-lock/dist/es2015/Combination',
  page: '/'
}
 ✓ Compiled /_error in 189ms (1393 modules)
 ⨯ Error [ERR_MODULE_NOT_FOUND]: Cannot find module './node_modules/react-focus-lock/dist/es2015/Combination' imported from ./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:///home/{exact-path-removed}/node_modules/react-focus-lock/dist/es2015/Combination',
  page: '/'
}
<w> [webpack.cache.PackFileCacheStrategy] Restoring pack failed from /home/{exact-path-removed}/.next/cache/webpack/client-development-fallback.pack.gz: Error: invalid code lengths set

Looks like that it is @chakra-ui/react@2.8.2 that brings react-focus-lock to my project. After I downgrade to react-focus-lock@2.11.0 project seems to be working once again.

kerbe on Apr 20, 2024

i’m also facing the same issue, though im using @chakra-ui/react@2.5.5 which uses react-focus-lock@2.9.4, the issue still persists.

UPDATE: Works with overriding react-focus-lock version in package.json

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

prasad-kumkar on Apr 20, 2024

Wondering if just removing type: "module" from package.json would solve the problem.

Anyway 2.12.1 has been published.

theKashey on Apr 22, 2024

Working on a resolution:

fixing ESM is not an option. Unfortunately, too many downstream packages require a bump
other “simple” solutions are endangered by my inability to reproduce the problem. Reason unknown.
➡️ for now I am going to republish 2.11.3 as 2.12.1

theKashey on Apr 22, 2024

Version 2.12.0 has been deprecated, please use 2.11.3

Due to semantic versioning, I think you might have to publish a new version that hot-fixes or reverts the breaking changes introduced in 2.12.

In my package.json I locked the version:

"react-focus-lock": "2.11.3"

instead of:

"react-focus-lock": "^2.11.3"

danielweck on Apr 21, 2024

Version 2.12.0 has been deprecated, please use 2.11.3

theKashey on Apr 20, 2024

@likegs9 The bug seems to be fixed. After installing the new verison, there’s no error.

catamphetamine on Apr 22, 2024

Getting same error. The package is broken and unusable. Author doesn’t know how to properly publish npm packages.

Workaround: yarn add react-focus-lock@2.11.3.

Do not update the package version, or your app will break.

catamphetamine on Apr 21, 2024

I am not using react-focus-lock directly in my project but its getting installed as a dependency for chakra-ui version 2.8.2 , how can i fix the above issue the issue in this case ?

“node_modules/@chakra-ui/focus-lock”: { “version”: “2.1.0”, “license”: “MIT”, “dependencies”: { “@chakra-ui/dom-utils”: “2.1.0”, “react-focus-lock”: “^2.9.4” }, “peerDependencies”: { “react”: “>=18” } },

Harsh7wardhan on Apr 21, 2024