Webpack-cli: [Enhancement]: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

[naliferov]

system: macOS
node version: 14.2
[email protected]
[email protected]

So, i have config file "webpack.config.js"
export default { entry: './i.js', output: { filename: 'bundle.js' } }

in package.json i have "type": "module"

in i.js i have code

import * as path from 'path';
console.log(path);

so i use cmd
webpack --config webpack.config.js

and got error:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/x8core/Projects/anyx-cli/webpack.config.js
require() of ES modules is not supported.

In documentation i see. "When using webpack to bundle your application, you can pick from a variety of module syntax styles including ES6"

Why i am getting such error? Am i need to use babel?

[naliferov]

I already provide this information above: "in package.json i have "type": "module""

[Legends]

I solved this

ERR_REQUIRE_ESM

by changing the extension of the webpack.config .js to .cjs.
It compiles fine, but during runtime I get:

ReferenceError: window is not defined

I tracked it down to the dynamic import: import("./lazy.js") in main.js.
If I change it to a normal import the app runs flawlessly.

Here is the repo to reproduce this issue.

Node -v: v14.4.0
Win10

[ogonkov]

When webpack config got .cjs it doesn't seem recognized as valid config at all (file exist).

[webpack-cli] Configuration webpack.config.cjs not found in /Users/user/Projects/project/webpack.config.cjs

[rockerBOO]

This error happens in webpack 4 because it uses require to include your webpack.config.js. When you move to module, webpack is still using require to include your webpack.config.js. Changing the main config to webpack.config.cjs and importing your module inside of that should work.

module.exports = async (env, argv) => {
  const config = await import('./webpack.config.mjs')
  return config.default(env, argv)
}

This uses the function webpack config model but just importing should work.

---

In the future of webpack 5, webpack-cli 4, there should be native support for .mjs or .js as modules and this "hack" won't be needed.

[naliferov]

This is absolutely madness

[thSoft]

Unfortunately @rockerBOO's solution does not work for me, the following error occurs: https://github.com/webpack/webpack-cli/issues/1274

[rockerBOO]

@thSoft I have had success with using the esm plugin. https://www.npmjs.com/package/esm

yarn webpack-dev-server --config ./webpack.config.cjs -r esm

Note: esm module presents a custom module loader that doesn't reflect node ES modules properly. I would take the time to learn of the differences (try to get thing requiring properly in node with modules).

Biggest to note is a lack of named exports in node modules. https://github.com/nodejs/node/blob/master/doc/api/esm.md

[clshortfuse]

So, it's been a while, but my "type": "module" project works with fine if I rename the .js file to cjs and force --config as a flag.

Previous:

• webpack --env.target=docs (throws errors)

New:

• webpack --config webpack.config.cjs --env.target=docs (works)

Not exactly the same thing as supporting a .mjs configuration for Webpack, but at least I don't have to stop using module packaging for my project.

[worc]

just tried the rename and flag workaround and it doesn't work for me, i get SyntaxError: Cannot use import statement outside a module

it might be a version issue? i've got a mix here that i've carried over from older projects:

    "webpack": "^5.3.2",
    "webpack-bundle-analyzer": "^3.9.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"

moving everything to latest, i get a repeat of an older issue: Error: Cannot find module 'webpack-cli/bin/config-yargs'

    "webpack": "^5.4.0",
    "webpack-bundle-analyzer": "^3.9.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"

https://github.com/webpack/webpack-dev-server/issues/2029

but if i change my startup script from the old style to the new:

    "start:old": "cross-env NODE_ENV=development webpack-dev-server --hot --inline --config webpack.config.cjs",
    "start:new": "cross-env NODE_ENV=development webpack serve --hot --inline --config webpack.config.cjs",

i end up back where i started: SyntaxError: Cannot use import statement outside a module

it's not clear where i should go from here. the older style is incompatible with wherever the config-yargs directory was yeeted off to. the newer style is incompatible with import/export statements?

[alexander-akait]

Because you can't use import inside cjs, please read how it works

[trusktr]

SyntaxError: Cannot use import statement outside a module

The manual, in case it helps: https://nodejs.org/docs/latest/api/esm.html

[trusktr]

@clshortfuse You suggestion isn't working with the latest Webpack (I think).

This is my config:

// webpack.config.cjs
module.exports = async function () {
    return (await import("./webpack.config.mjs")).default;
};

// webpack.config.mjs
import path from "path";

export default {
    entry: "./dist/main.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
    },
};

All fine, the config looks good. Now when I run webpack I get an error:

❯ npx webpack -c webpack.config.cjs
[webpack-cli] 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 module.exports (/home/trusktr/src/JomoPipi+nunisynthv2/webpack.config.cjs:4:5)
    at /home/trusktr/src/JomoPipi+nunisynthv2/node_modules/webpack-cli/lib/groups/resolveConfig.js:176:35
    at Array.map (<anonymous>)
    at finalize (/home/trusktr/src/JomoPipi+nunisynthv2/node_modules/webpack-cli/lib/groups/resolveConfig.js:166:20)
    at /home/trusktr/src/JomoPipi+nunisynthv2/node_modules/webpack-cli/lib/groups/resolveConfig.js:101:20
    at Array.map (<anonymous>)
    at resolveConfigFiles (/home/trusktr/src/JomoPipi+nunisynthv2/node_modules/webpack-cli/lib/groups/resolveConfig.js:89:41)
    at module.exports (/home/trusktr/src/JomoPipi+nunisynthv2/node_modules/webpack-cli/lib/groups/resolveConfig.js:247:11)
    at WebpackCLI._baseResolver (/home/trusktr/src/JomoPipi+nunisynthv2/node_modules/webpack-cli/lib/webpack-cli.js:53:38) {
  code: 'ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING'
}

looks like the latest webpack is running the config file through a custom VM, and not providing the needed ESM callback.

EDIT: Looks like this issue was already described in https://github.com/webpack/webpack-cli/issues/1274 and that was closed in favor of this issue.

Why does Webpack run configs through a VM? Trying to prevent people from hacking on Webpack internals at runtime?

[djflex68]

Having the same issue.
All closed issues relative to this problem reference the workaround quoted here.
But that workaround throws error [ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING]: A dynamic import callback was not specified. as stated by @trusktr
For now we just cannot use mjs modules in our app, although they are officially supported by node since version 13.

[alexander-akait]

Solved on our side, but there is bug in v8-compile-cache, anyway you can use DISABLE_V8_COMPILE_CACHE webpack --config ./webpack.config.mjs and all will work fine

[alexander-akait]

https://github.com/zertosh/v8-compile-cache/issues/30

[snoack]

If I understand correctly v8-compile-cache is a package that webpack explicitly uses. Couldn't you just not use it if an ESM configuration is used?

[alexander-akait]

@snoack Unfortunately not, no API to disable it

[snoack]

Would process.env.DISABLE_V8_COMPILE_CACHE = '1' work?

[alexander-akait]

@snoack it work only before require('v8-compile-cache'), so it works only for whole process

[justsml]

I know this isn't a solution for everyone, but my workaround was to change my package.json's "type" from "module" to "commonjs".

I'm transforming it into ESM as a post-build hack. 🤷 👀

[alexander-akait]

Found solution, some hacky, but works fine, but no v8 cache for config files, but v8 already cache ES modules, so nothing bad