javascript - webpack: "[ERR_REQUIRE_ESM]: Moet import gebruiken om ES Module te laden" - Maar IK gebruik import!

Ik probeer een npm-pakket te genereren met webpack, dat JavaScript op ES6-niveau zal bevatten (gegenereerd vanuit TypeScript), en zal ook het ES6-moduleformaat gebruiken, zonder te transpilen naar ES5 en CommonJS. (Uiteindelijk zou ik ook ES5/CommonJS in het pakket willen hebben, naast de ES6-code.)

Ik krijg deze foutmelding wanneer ik probeer webpack uit te voeren:

[webpack-cli] Fout [ERR_REQUIRE_ESM]: Er moet import worden gebruikt om ES Module te laden: /Users/.../webpack.config.mjs

Zoals je echter kunt zien, gebruik ik import in mijn webpack.config.mjs bestand, dat er als volgt uitziet:

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'
  },
  ...

Ik gebruik node v14.15.1, waarvan wordt verondersteld dat het ES6-modulegeneratie ondersteunt. Mijn package.json ziet er zo uit:

{
  "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"
    ...

Ik heb allerlei variaties van het bovenstaande geprobeerd: main in plaats van module, main samen met module, met dezelfde of andere bestandsnamen (zoals "module": "dist/index.esm.js"). Ik heb geprobeerd de webpack --output-module-optie weg te halen, of de --experiments-output-module-optie te gebruiken.

Ik heb veel berichten gevonden over ERR_REQUIRE_ESM, maar geen die specifiek ingaan op wat ik hier met webpack probeer te doen. Zelfs bij andere gerelateerde problemen lijkt er veel frustratie te zijn, maar weinig antwoorden.

Antwoord #1

Ik heb dit probleem opgelost door over te stappen op typescript-types van bestanden en aanpak. Verrassenderwijs werkt het:

package.json

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

babel.config.ts

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

webpack.common.ts

import { common } from './webpack.common'
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

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