xdm: xdm webpack loader doesn’t work with webpack cli
The issue can be reproduced from within this repository. I use Webpack 4, but the same issue can be reproduced using Webpack 5.
In this repository, add the following files:
webpack.config.cjs:
module.exports = {
module: {
rules: [
{
test: /\.mdx?$/,
loader: require.resolve('./webpack.cjs')
}
]
}
};
src/index.js:
import './foo.md'
src/foo.md:
<Hello />
Now running the following command yields an error:
$ yarn webpack --mode production
The first time the following error is thrown:
(node:619531) UnhandledPromiseRejectionWarning: TypeError [ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING]: A dynamic import callback was not specified.
at exports.importModuleDynamicallyCallback (internal/process/esm_loader.js:34:9)
at Object.module.exports (/home/remco/Projects/xdm/webpack.cjs:14:3)
at LOADER_EXECUTION (/home/remco/Projects/xdm/node_modules/loader-runner/lib/LoaderRunner.js:132:14)
at runSyncOrAsync (/home/remco/Projects/xdm/node_modules/loader-runner/lib/LoaderRunner.js:133:4)
at iterateNormalLoaders (/home/remco/Projects/xdm/node_modules/loader-runner/lib/LoaderRunner.js:250:2)
at Array.<anonymous> (/home/remco/Projects/xdm/node_modules/loader-runner/lib/LoaderRunner.js:223:4)
at runCallbacks (/home/remco/Projects/xdm/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:27:15)
at /home/remco/Projects/xdm/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:200:4
at /home/remco/Projects/xdm/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:619531) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:619531) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
After a retry, this error is thrown:
(node:620590) UnhandledPromiseRejectionWarning: TypeError: Invalid host defined options
at Object.module.exports (/home/remco/Projects/xdm/webpack.cjs:14:3)
at LOADER_EXECUTION (/home/remco/Projects/xdm/node_modules/loader-runner/lib/LoaderRunner.js:132:14)
at runSyncOrAsync (/home/remco/Projects/xdm/node_modules/loader-runner/lib/LoaderRunner.js:133:4)
at iterateNormalLoaders (/home/remco/Projects/xdm/node_modules/loader-runner/lib/LoaderRunner.js:250:2)
at Array.<anonymous> (/home/remco/Projects/xdm/node_modules/loader-runner/lib/LoaderRunner.js:223:4)
at runCallbacks (/home/remco/Projects/xdm/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:27:15)
at /home/remco/Projects/xdm/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:200:4
at /home/remco/Projects/xdm/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:620590) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:620590) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Afterwards the errors seem to alternate randomly.
I did not run into this issue when using koa-webpack. This may explain why this issue isn’t caught by any tests.
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 19 (11 by maintainers)
Commits related to this issue
- Add note on workaround for `webpack-cli` Related-to GH-11. Closes GH-12. — committed to wooorm/xdm by remcohaszing 3 years ago
The loader itself is using CommonJS. The issue is that Webpack loaders can’t use any dependencies that use ESM if they are used with
webpack-cli.In other words: to fix this, would mean all of
xdmwould need to be converted to CommonJS. The real issue is upstream inv8-compile-cache.I actually expect the situation to get even worse in the JavaScript ecosystem as more and more packages will start using ESM, whilst others won’t even support it yet. It will be better in the end though. 😄
See https://github.com/unifiedjs/unified/issues/121, not just xdm but all layers of unified are moving to pure ESM. Most tools have already added support for ESM or are in the process of doing so https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
We’ve experimented with mixed ESM and CJS in the past, it didn’t go so well https://github.com/remarkjs/react-markdown/issues/518 Tools are better equipped to handle pure ESM packages, than CJS and ESM fusion ones.
Seems
v8-compile-cacheis widely used by famous tools like eslint, webpack-cli, parcel, gatsby etc., so all of them will likely to have problem like this if we want to deal with ESM. I know Node.js 10 will be end of life soon, but the world doesn’t seem be to ready for ESM yet even it’s out for many years.I initially tried this in a separate project, but I figured reproducing it inside the repository might be convenient. The issue exists there as well.
Setting
DISABLE_V8_COMPILE_CACHE=1seems to work.Can you try running this with the
DISABLE_V8_COMPILE_CACHE=1flag?