ESM compatibility breaks WebPack build

danielweck commented 2 months ago

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 commented 2 months ago

I'm facing the same issue

kerbe commented 2 months ago

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 commented 2 months ago

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

prasad-kumkar commented 2 months ago

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 commented 2 months ago

Version 2.12.0 has been deprecated, please use 2.11.3

Harsh7wardhan commented 2 months ago

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 commented 2 months ago

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

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

danielweck commented 2 months ago

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 commented 2 months ago

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.

sniper365 commented 2 months ago

@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 commented 2 months ago

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 commented 2 months ago

@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 commented 2 months ago

@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 commented 2 months ago

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

Anyway 2.12.1 has been published.

likegs9 commented 2 months ago

Please fix this Bug

catamphetamine commented 2 months ago

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

stale[bot] commented 3 weeks ago

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 commented 3 weeks ago

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

theKashey / react-focus-lock

ESM compatibility breaks WebPack build #301