ESM compatibility breaks WebPack build

[danielweck]

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

[Harsh7wardhan]

I'm facing the same issue

[kerbe]

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/[email protected] that brings react-focus-lock to my project. After I downgrade to [email protected] project seems to be working once again.

[Pablo-ArgF]

I am facing the same issue, downgrading the module version as @kerbe pointed out seems to fix the issue.

[prasad-kumkar]

i'm also facing the same issue, though im using @chakra-ui/[email protected] which uses [email protected], the issue still persists.

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

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

[theKashey]

Version 2.12.0 has been deprecated, please use 2.11.3

[Harsh7wardhan]

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" } },

[danielweck]

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

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

[danielweck]

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"

[catamphetamine]

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

Workaround: yarn add [email protected].

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

[sniper365]

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

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

I added overrides but still doesn't work.

But this is working.

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

[theKashey]

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

[Jexah]

@theKashey Hey mate, just wondering how long on that re-publish, I've got a build that urgently needs QA and I'd rather not use force-resolutions. Can do if needed tho, what timeframe were you thinking?

[catamphetamine]

@theKashey

for now I am going to republish 2.11.3 as 2.12.1

I'd suggest doing that.

• If there're no production apps or packages that already use 2.12.0 then there's no need to maintain any backwards compatibility and it could simply be a republish of an older version.
• If there are any production apps or packages that already use 2.12.0 then just break those apps or packages by deleting version 2.12.0 from npm. It will produce an error during npm install on their machines and they will figure out that they should go and read. Also, if they're using ESM imports, their build would detect any inconsistencies at compile time. In any case, I think that the amount of people using the older version is much larger than then amount of people, if any, using the latest version.

[theKashey]

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

---

Anyway 2.12.1 has been published.

[likegs9]

Please fix this Bug

[catamphetamine]

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

[stale[bot]]

This issue has been marked as "stale" because there has been no activity for 2 months. If you have any new information or would like to continue the discussion, please feel free to do so. If this issue got buried among other tasks, maybe this message will reignite the conversation. Otherwise, this issue will be closed in 7 days. Thank you for your contributions so far.

[theKashey]

There is no errors because focus-lock is not ESM compatible. Conversion is blocked by underlaying libraries to be migrated first, and that would take time