ESM compatibility breaks WebPack build #301

danielweck · 2024-04-20T10:12:43Z

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

The text was updated successfully, but these errors were encountered:

Harsh7wardhan · 2024-04-20T12:51:20Z

I'm facing the same issue

kerbe · 2024-04-20T13:53:17Z

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.

Pablo-ArgF · 2024-04-20T16:05:09Z

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

prasad-kumkar · 2024-04-20T17:23:56Z

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

theKashey · 2024-04-20T22:54:54Z

Version 2.12.0 has been deprecated, please use 2.11.3

Harsh7wardhan · 2024-04-21T05:39:13Z

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 · 2024-04-21T07:11:47Z

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

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

danielweck · 2024-04-21T07:13:16Z

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 · 2024-04-21T08:29:23Z

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.

…age breaking ESM breaking WebPack build theKashey/react-focus-lock#301

sniper365 · 2024-04-21T18:26:32Z

@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 · 2024-04-22T00:27:05Z

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 · 2024-04-22T02:45:01Z

@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 · 2024-04-22T04:00:40Z

@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 · 2024-04-22T06:31:24Z

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

Anyway 2.12.1 has been published.

likegs9 · 2024-04-22T06:38:28Z

Please fix this Bug

catamphetamine · 2024-04-22T06:45:07Z

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

danielweck mentioned this issue Apr 20, 2024

react focus lock WebPack ECMAScript module / ES2015 bundling error?? edrlab/thorium-reader#2101

Closed

This was referenced Apr 20, 2024

added file extension in imports as it was breaking in webpack 5 #302

Closed

version 2.12.0 , feature "ESM Compatible" breaks React app CRA build with Chackra UI #303

Closed

theKashey added a commit that referenced this issue Apr 20, 2024

fix: correct ESM implemenation, fixes #301

832f34c

henrybabbage added a commit to henrybabbage/pukauae that referenced this issue Apr 21, 2024

fix error originating from react-focus-lock within chakra due to pack…

80b2bab

…age breaking ESM breaking WebPack build theKashey/react-focus-lock#301

This was referenced Apr 21, 2024

Module Resolution Error: Missing File Extensions in Import Statements #305

Closed

Package doesn't work theKashey/focus-lock#70

Closed

zhzz mentioned this issue Apr 22, 2024

test(smoke): temp fix for broken react-focus-lock@2.12.0 skbkontur/retail-ui#3408

Merged

SyMind mentioned this issue Apr 22, 2024

fix: latest fix-react-focus-lock breaks webpack build rspack-contrib/rspack-examples#55

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ESM compatibility breaks WebPack build #301

ESM compatibility breaks WebPack build #301

danielweck commented Apr 20, 2024 •

edited

Harsh7wardhan commented Apr 20, 2024

kerbe commented Apr 20, 2024 •

edited

Pablo-ArgF commented Apr 20, 2024

prasad-kumkar commented Apr 20, 2024 •

edited

theKashey commented Apr 20, 2024

Harsh7wardhan commented Apr 21, 2024

danielweck commented Apr 21, 2024

danielweck commented Apr 21, 2024

catamphetamine commented Apr 21, 2024

sniper365 commented Apr 21, 2024 •

edited

theKashey commented Apr 22, 2024

Jexah commented Apr 22, 2024

catamphetamine commented Apr 22, 2024 •

edited

theKashey commented Apr 22, 2024

likegs9 commented Apr 22, 2024

catamphetamine commented Apr 22, 2024

ESM compatibility breaks WebPack build #301

ESM compatibility breaks WebPack build #301

Comments

danielweck commented Apr 20, 2024 • edited

Harsh7wardhan commented Apr 20, 2024

kerbe commented Apr 20, 2024 • edited

Pablo-ArgF commented Apr 20, 2024

prasad-kumkar commented Apr 20, 2024 • edited

theKashey commented Apr 20, 2024

Harsh7wardhan commented Apr 21, 2024

danielweck commented Apr 21, 2024

danielweck commented Apr 21, 2024

catamphetamine commented Apr 21, 2024

sniper365 commented Apr 21, 2024 • edited

theKashey commented Apr 22, 2024

Jexah commented Apr 22, 2024

catamphetamine commented Apr 22, 2024 • edited

theKashey commented Apr 22, 2024

likegs9 commented Apr 22, 2024

catamphetamine commented Apr 22, 2024

danielweck commented Apr 20, 2024 •

edited

kerbe commented Apr 20, 2024 •

edited

prasad-kumkar commented Apr 20, 2024 •

edited

sniper365 commented Apr 21, 2024 •

edited

catamphetamine commented Apr 22, 2024 •

edited