Adding ES6 `import("find-cache-dir");` should be a breaking change.

[easingthemes]

I'm submitting a bug report

Babel Loader Version: 9.1.13

Please tell us about your environment: n/a

Current behavior: Package contains ES6 import. Introduced recently in this PR: https://github.com/babel/babel-loader/pull/995/files#diff-3fb1021e8b65be53e466751de219baf5282edb86a3a1ad8fe429cac948991af7R16

Caused by upgrading find-cache-dir from v4 to v5.

Using Webpack build inside Jest tests is failing.

   You need to run with a version of node that supports ES Modules in the VM API. See https://jestjs.io/docs/ecmascript-modules

      at invariant (node_modules/jest-util/build/invariant.js:16:11)
      at Object.<anonymous> (node_modules/babel-loader/lib/cache.js:22:23)

Expected/desired behavior: Either new breaking change version, or reverting find-cache-dir upgrade.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration.

Simple example https://codesandbox.io/p/devbox/babel-loader-jest-rmkkd2?file=%2Fpackage.json npm run test

[nicolo-ribaudo]

Node.js has introduced support for ESM in the VM API in v12.16 (https://nodejs.org/api/vm.html#class-vmmodule), and this package only supports Node.js 14.15+ (https://github.com/babel/babel-loader/blob/a186b8bb8b257e7e13e5fc4c9a9ea2c6356e70ac/package.json#L10). It seems like that error is caused by a feature detection bug somewhere else.

[llins-wavefin]

I'm having this error when upgrading to 9.1.3, which doesn't happen in 9.1.2. Could it be related? I'm using Node.js v20.5.0. Might be good to mention that I'm also using Yarn PnP.

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'find-cache-dir' imported from /Users/llins/next-wave/.yarn/__virtual__/babel-loader-virtual-734c38bb6e/0/cache/babel-loader-npm-9.1.3-1856fdd4ac-b168dde5b8.zip/node_modules/babel-loader/lib/cache.js
Did you mean to import find-cache-dir-npm-4.0.0-cc082212a1-52a456a80d.zip/node_modules/find-cache-dir/index.js?
    at new NodeError (node:internal/errors:405:5)
    at packageResolve (node:internal/modules/esm/resolve:782:9)
    at moduleResolve (node:internal/modules/esm/resolve:831:20)
    at defaultResolve (node:internal/modules/esm/resolve:1036:11)
    at DefaultModuleLoader.resolve (node:internal/modules/esm/loader:251:12)
    at DefaultModuleLoader.getModuleJob (node:internal/modules/esm/loader:140:32)
    at DefaultModuleLoader.import (node:internal/modules/esm/loader:227:28)
    at importModuleDynamically (node:internal/modules/cjs/loader:1163:37)
    at importModuleDynamicallyWrapper (node:internal/vm/module:428:21)
    at importModuleDynamically (node:internal/vm:105:46) {
  code: 'ERR_MODULE_NOT_FOUND'
}

[JLHwung]

I'm having this error when upgrading to 9.1.3, which doesn't happen in 9.1.2. Could it be related? I'm using Node.js v20.5.0. Might be good to mention that I'm also using Yarn PnP.

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'find-cache-dir' imported from /Users/llins/next-wave/.yarn/__virtual__/babel-loader-virtual-734c38bb6e/0/cache/babel-loader-npm-9.1.3-1856fdd4ac-b168dde5b8.zip/node_modules/babel-loader/lib/cache.js
Did you mean to import find-cache-dir-npm-4.0.0-cc082212a1-52a456a80d.zip/node_modules/find-cache-dir/index.js?
    at new NodeError (node:internal/errors:405:5)
    at packageResolve (node:internal/modules/esm/resolve:782:9)
    at moduleResolve (node:internal/modules/esm/resolve:831:20)
    at defaultResolve (node:internal/modules/esm/resolve:1036:11)
    at DefaultModuleLoader.resolve (node:internal/modules/esm/loader:251:12)
    at DefaultModuleLoader.getModuleJob (node:internal/modules/esm/loader:140:32)
    at DefaultModuleLoader.import (node:internal/modules/esm/loader:227:28)
    at importModuleDynamically (node:internal/modules/cjs/loader:1163:37)
    at importModuleDynamicallyWrapper (node:internal/vm/module:428:21)
    at importModuleDynamically (node:internal/vm:105:46) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Please upgrade Yarn to 3.1 or above, see https://yarnpkg.com/getting-started/qa#does-yarn-support-esm

[llins-wavefin]

I'm having this error when upgrading to 9.1.3, which doesn't happen in 9.1.2. Could it be related? I'm using Node.js v20.5.0. Might be good to mention that I'm also using Yarn PnP.

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'find-cache-dir' imported from /Users/llins/next-wave/.yarn/__virtual__/babel-loader-virtual-734c38bb6e/0/cache/babel-loader-npm-9.1.3-1856fdd4ac-b168dde5b8.zip/node_modules/babel-loader/lib/cache.js
Did you mean to import find-cache-dir-npm-4.0.0-cc082212a1-52a456a80d.zip/node_modules/find-cache-dir/index.js?
    at new NodeError (node:internal/errors:405:5)
    at packageResolve (node:internal/modules/esm/resolve:782:9)
    at moduleResolve (node:internal/modules/esm/resolve:831:20)
    at defaultResolve (node:internal/modules/esm/resolve:1036:11)
    at DefaultModuleLoader.resolve (node:internal/modules/esm/loader:251:12)
    at DefaultModuleLoader.getModuleJob (node:internal/modules/esm/loader:140:32)
    at DefaultModuleLoader.import (node:internal/modules/esm/loader:227:28)
    at importModuleDynamically (node:internal/modules/cjs/loader:1163:37)
    at importModuleDynamicallyWrapper (node:internal/vm/module:428:21)
    at importModuleDynamically (node:internal/vm:105:46) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Please upgrade Yarn to 3.1 or above, see https://yarnpkg.com/getting-started/qa#does-yarn-support-esm

We're using Yarn 3.6.1

[JLHwung]

Can you share a reproduction repo? Babel-loader itself is using yarn pnp as well. And our CI looks good.

[Schweinepriester]

I believe - not fully confident - that https://github.com/babel/babel-loader/pull/1005 by @ahce attempts to fix the very same issue, presenting a minimal repro in the process.

If the change leading to those errors is intended as is, I concur that it should be a breaking change.

[7rulnik]

I am using yarn v3.5.1 with classic node_modules layout.

In my case error looks like this:

node:internal/modules/esm/utils:231
  throw new ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING();
        ^

TypeError [ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING]: A dynamic import callback was not specified.
    at importModuleDynamicallyCallback (node:internal/modules/esm/utils:231:9)
    at Object.<anonymous> (/Users/v7rulnik/projects/aviasales/selene/node_modules/babel-loader/lib/cache.js:22:23)
    at Module._compile (/Users/v7rulnik/projects/aviasales/selene/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at require (/Users/v7rulnik/projects/aviasales/selene/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/Users/v7rulnik/projects/aviasales/selene/node_modules/babel-loader/lib/index.js:19:15)
    at Module._compile (/Users/v7rulnik/projects/aviasales/selene/node_modules/v8-compile-cache/v8-compile-cache.js:192:30) {
  code: 'ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING'
}

I solved it by upgrading webpack-cli to 4.9.1 (or higher).

See for details https://github.com/webpack/webpack-cli/pull/3006