javascript - webpack: "[ERR_REQUIRE_ESM]: Must use import to load ES Module" - But I AM using import！ - Stack

I'm trying to generate an npm package with webpack, which will contain ES6-level JavaScript (generated from TypeScript), and will use the ES6 module format as well, without transpiling down to ES5 and CommonJS. (Eventually I'd like to have ES5/CommonJS in the package too, in addition to the ES6 code.)

I'm getting this error when I try to run webpack:

[webpack-cli] Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/.../webpack.config.mjs

As you can see, however, I AM using import in my webpack.config.mjs file, which looks like this:

import { CleanWebpackPlugin } from 'clean-webpack-plugin';
import path from 'path';

const NODE_ENV = process.env.NODE_ENV || 'production';

export default {
  mode: NODE_ENV,
  entry: './src/index.ts',
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  ...

I'm using node v14.15.1, which is supposed to support ES6 module generation. My package.json looks like this:

{
  "name": "my-package",
  "version": "2.0.0",
  "description": "Blah, blah, blah",
  "type": "module",
  "module": "dist/index.js",
  "scripts": {
    "build": "webpack --output-module",
    "prepack": "npm run build",
    "prepublishOnly": "npm run build",
    "lint": "eslint \"src/**/*.ts\"",
    "test": "nyc --reporter=html mocha --require ts-node/register src/**/*.spec.ts",
    "test-dev": "mocha --require ts-node/register -w --watch-extensions ts src/**/*.spec.ts"
  },
  ...
  "devDependencies": {
    ...
    "webpack": "^5.10.1",
    "webpack-cli": "^4.2.0",
    "webpack-node-externals": "^2.5.2"
    ...

I've tried all sorts of variations on the above: main instead of module, main along with module, with the same or different file names (such as "module": "dist/index.esm.js"). I've tried taking away the webpack --output-module option, or using the --experiments-output-module option.

I've found lots of posts concerning ERR_REQUIRE_ESM, but none dealing specifically with what I'm trying to do here with webpack. Even for other related issues there seems to be lots of frustration but few answers.

I'm trying to generate an npm package with webpack, which will contain ES6-level JavaScript (generated from TypeScript), and will use the ES6 module format as well, without transpiling down to ES5 and CommonJS. (Eventually I'd like to have ES5/CommonJS in the package too, in addition to the ES6 code.)

I'm getting this error when I try to run webpack:

[webpack-cli] Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/.../webpack.config.mjs

As you can see, however, I AM using import in my webpack.config.mjs file, which looks like this:

import { CleanWebpackPlugin } from 'clean-webpack-plugin';
import path from 'path';

const NODE_ENV = process.env.NODE_ENV || 'production';

export default {
  mode: NODE_ENV,
  entry: './src/index.ts',
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  ...

I'm using node v14.15.1, which is supposed to support ES6 module generation. My package.json looks like this:

{
  "name": "my-package",
  "version": "2.0.0",
  "description": "Blah, blah, blah",
  "type": "module",
  "module": "dist/index.js",
  "scripts": {
    "build": "webpack --output-module",
    "prepack": "npm run build",
    "prepublishOnly": "npm run build",
    "lint": "eslint \"src/**/*.ts\"",
    "test": "nyc --reporter=html mocha --require ts-node/register src/**/*.spec.ts",
    "test-dev": "mocha --require ts-node/register -w --watch-extensions ts src/**/*.spec.ts"
  },
  ...
  "devDependencies": {
    ...
    "webpack": "^5.10.1",
    "webpack-cli": "^4.2.0",
    "webpack-node-externals": "^2.5.2"
    ...

I've tried all sorts of variations on the above: main instead of module, main along with module, with the same or different file names (such as "module": "dist/index.esm.js"). I've tried taking away the webpack --output-module option, or using the --experiments-output-module option.

I've found lots of posts concerning ERR_REQUIRE_ESM, but none dealing specifically with what I'm trying to do here with webpack. Even for other related issues there seems to be lots of frustration but few answers.

• javascript
• typescript
• npm
• webpack
• es6-modules

Share Improve this question Follow asked Dec 15, 2020 at 6:25 kshetlinekshetline 13.8k66 gold badges4949 silver badges9191 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

I solved this problem by migrating to typescript type of files and approach. Suprisingly enough it works:

package.json

{ 
   ...
   "type": "module",
   ...
}

babel.config.ts

export default api => {
  api.cache(true)
  return {
    presets: ['...'],
    plugins: ['...'],
    env: { '...': '...' },
  }
}

webpack.mon.ts

import { mon } from './webpack.mon'
import webpack from 'webpack'
...

export default {
  entry: {
    '...': '...',
  },
  output: {
    '...': '...',
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/i,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: [
                [
                  '@babel/preset-env',
                  {
                    '...': '...',
                  },
                ],
                '@babel/preset-react',
                '@babel/typescript',
              ],
              plugins: [
                ['babel-plugin-transform-require-ignore', {}],
                '@babel/plugin-proposal-class-properties',
                '@babel/plugin-proposal-object-rest-spread',
              ],
            },
          },
        ],
      },
      '...'
    ],
  },
}

tsconfig.json

{
  "pilerOptions": {
    "...": "..."
  },
  "include": ["..."],
  "exclude": ["..."],
  "linterOptions": {
    "exclude": ["..."]
  },
  "defaultSeverity": "..."
}