[Enhancement]: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module #1622

naliferov · 2020-06-06T10:25:55Z

system: macOS
node version: 14.2
webpack@4.43.0
webpack-cli@3.3.11

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?

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

naliferov · 2020-06-06T12:47:41Z

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

Legends · 2020-06-06T21:38:15Z

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 · 2020-07-09T17:17:14Z

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 · 2020-08-20T15:37:40Z

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 · 2020-09-09T19:03:14Z

This is absolutely madness

thSoft · 2020-09-17T12:14:04Z

Unfortunately @rockerBOO's solution does not work for me, the following error occurs: #1274

rockerBOO · 2020-09-17T14:14:40Z

@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 · 2020-10-03T14:40:47Z

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.

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 · 2020-11-05T23:50:49Z

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"

webpack/webpack-dev-server#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 · 2020-11-06T10:41:51Z

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

trusktr · 2020-11-29T03:48:54Z

SyntaxError: Cannot use import statement outside a module

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

trusktr · 2020-11-29T04:48:44Z

@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 #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?

elsasslegend · 2020-12-01T16:33:12Z

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 · 2020-12-31T15:12:48Z

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 · 2020-12-31T15:15:10Z

zertosh/v8-compile-cache#30

snoack · 2021-01-16T05:10:28Z

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 · 2021-01-18T11:33:11Z

@snoack Unfortunately not, no API to disable it

snoack · 2021-01-18T21:52:28Z

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

alexander-akait · 2021-01-19T10:35:08Z

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

justsml · 2021-01-25T23:03:03Z

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 · 2021-01-28T14:20:43Z

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

thernstig · 2021-05-26T16:58:14Z

Using the latest webpack 4 and latest webpack 4 dev server (we cannot update to webpack 5 yet) I tried this workaround:

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

It ran me into the ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING error.
I then added the DISABLE_V8_COMPILE_CACHE=1 workaround.

But then I get this error: Error: Cannot find module 'webpack-cli/bin/config-yargs

So I "almost" came all the way, but got stuck there. Is there nothing I can do about it to make it work with Webpack 4 then?

alexander-akait · 2021-05-26T17:08:22Z

What is webpack-cli version?

thernstig · 2021-05-26T18:39:02Z

I was using these versions of all Webpack related packages:

    "webpack": "4.44.2",
    "webpack-cli": "4.7.0",
    "webpack-dev-server": "3.10.3",
    "webpack-merge": "4.2.2"

alexander-akait · 2021-05-26T18:51:44Z

I see, put it in todo, we should fix compatibility with ES in near future, problem in v8-compile-cache 😞

its-dibo · 2021-09-26T21:00:34Z

I got this error with webpack -c weback.config.ts

(node:3580) UnhandledPromiseRejectionWarning: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /workspace/dibo/projects/ngx-cms/node_modules/colorette/index.js
require() of ES modules is not supported.
require() of /workspace/dibo/projects/ngx-cms/node_modules/colorette/index.js from /workspace/dibo/projects/ngx-cms/node_modules/webpack-cli/lib/utils/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename /workspace/dibo/projects/ngx-cms/node_modules/colorette/index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /workspace/dibo/projects/ngx-cms/node_modules/colorette/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1089:13)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (/workspace/dibo/projects/ngx-cms/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.get colors [as colors] (/workspace/dibo/projects/ngx-cms/node_modules/webpack-cli/lib/utils/index.js:3:16)
    at Object.error (/workspace/dibo/projects/ngx-cms/node_modules/webpack-cli/lib/utils/logger.js:5:58)
    at runCLI (/workspace/dibo/projects/ngx-cms/node_modules/webpack-cli/lib/bootstrap.js:13:22)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:3580) 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:3580) [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.

clshortfuse · 2022-03-28T21:58:16Z

@nyngwang You're replying in a issue from mid-2020. It was fixed in webpack-cli 4.5.0 in February 2021 last year. That's why this is closed.

#2381

sokra transferred this issue from webpack/webpack Jun 6, 2020

evenstensberg added enhancement Feature Help Wanted labels Aug 28, 2020

evenstensberg changed the title ~~Error [ERR_REQUIRE_ESM]: Must use import to load ES Module~~ [Enhancement]: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module Aug 28, 2020

evenstensberg added the Priority: High label Aug 30, 2020

alexander-akait mentioned this issue Sep 17, 2020

Using import() fails #1274

Closed

alexander-akait mentioned this issue Oct 3, 2020

[Feature]: Consider supporting webpack.config.mjs alongside webpack.config.js #282

Closed

3bl3gamer mentioned this issue Oct 16, 2020

ESLintPlugin has no construct signatures webpack-contrib/eslint-webpack-plugin#16

Closed

lubieowoce added a commit to lubieowoce/reservise-web that referenced this issue Nov 8, 2020

stupid webpack workaround (webpack/webpack-cli#1622)

991ce88

mquandalle mentioned this issue Jan 4, 2021

MAJ Node 14 betagouv/mon-entreprise#1333

Closed

2 tasks

alexander-akait mentioned this issue Jan 28, 2021

fix: support esm format for configurations #2381

Merged

alexander-akait closed this as completed in #2381 Feb 1, 2021

remcohaszing mentioned this issue Feb 24, 2021

xdm webpack loader doesn’t work with webpack cli wooorm/xdm#11

Closed

UsamaHameed mentioned this issue Mar 5, 2021

Webpack cli cannot import webpack config as esm #2484

Closed

chrisekelley mentioned this issue Jun 14, 2021

Update webpack to work with es6 Tangerine-Community/tangy-form#244

Merged

This comment was marked as outdated.

Sign in to view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Enhancement]: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module #1622

[Enhancement]: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module #1622

naliferov commented Jun 6, 2020

naliferov commented Jun 6, 2020

Legends commented Jun 6, 2020 •

edited

Loading

ogonkov commented Jul 9, 2020

rockerBOO commented Aug 20, 2020

naliferov commented Sep 9, 2020

thSoft commented Sep 17, 2020

rockerBOO commented Sep 17, 2020 •

edited

Loading

clshortfuse commented Oct 3, 2020 •

edited

Loading

worc commented Nov 5, 2020

alexander-akait commented Nov 6, 2020

trusktr commented Nov 29, 2020 •

edited

Loading

trusktr commented Nov 29, 2020 •

edited

Loading

elsasslegend commented Dec 1, 2020

alexander-akait commented Dec 31, 2020 •

edited

Loading

alexander-akait commented Dec 31, 2020

snoack commented Jan 16, 2021

alexander-akait commented Jan 18, 2021

snoack commented Jan 18, 2021

alexander-akait commented Jan 19, 2021

justsml commented Jan 25, 2021

alexander-akait commented Jan 28, 2021

thernstig commented May 26, 2021 •

edited

Loading

alexander-akait commented May 26, 2021

thernstig commented May 26, 2021

alexander-akait commented May 26, 2021

its-dibo commented Sep 26, 2021

This comment was marked as outdated.

clshortfuse commented Mar 28, 2022

[Enhancement]: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module #1622

[Enhancement]: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module #1622

Comments

naliferov commented Jun 6, 2020

naliferov commented Jun 6, 2020

Legends commented Jun 6, 2020 • edited Loading

ogonkov commented Jul 9, 2020

rockerBOO commented Aug 20, 2020

naliferov commented Sep 9, 2020

thSoft commented Sep 17, 2020

rockerBOO commented Sep 17, 2020 • edited Loading

clshortfuse commented Oct 3, 2020 • edited Loading

worc commented Nov 5, 2020

alexander-akait commented Nov 6, 2020

trusktr commented Nov 29, 2020 • edited Loading

trusktr commented Nov 29, 2020 • edited Loading

elsasslegend commented Dec 1, 2020

alexander-akait commented Dec 31, 2020 • edited Loading

alexander-akait commented Dec 31, 2020

snoack commented Jan 16, 2021

alexander-akait commented Jan 18, 2021

snoack commented Jan 18, 2021

alexander-akait commented Jan 19, 2021

justsml commented Jan 25, 2021

alexander-akait commented Jan 28, 2021

thernstig commented May 26, 2021 • edited Loading

alexander-akait commented May 26, 2021

thernstig commented May 26, 2021

alexander-akait commented May 26, 2021

its-dibo commented Sep 26, 2021

This comment was marked as outdated.

clshortfuse commented Mar 28, 2022

Legends commented Jun 6, 2020 •

edited

Loading

rockerBOO commented Sep 17, 2020 •

edited

Loading

clshortfuse commented Oct 3, 2020 •

edited

Loading

trusktr commented Nov 29, 2020 •

edited

Loading

trusktr commented Nov 29, 2020 •

edited

Loading

alexander-akait commented Dec 31, 2020 •

edited

Loading

thernstig commented May 26, 2021 •

edited

Loading