Must use import to load ES Module webpack.config.js

I decided to try the es6 Node modules.js (those that are .mjs or "type" = "module"). I write the code in typescript, the ts-loader webpack should compile the code into js files. The problem is that webpack does not want to be friends with the es6 environment and gives an error:

Must use import to load ES Module webpack.config.js


// webpack.config.js
import path from 'path'

export default {
  mode: 'development',
  target: 'node',
  entry: ['./main.ts'],
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
  rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
};


// package.json
{
  "name": "31_mycms2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/express": "^4.17.7",
    "@types/glob": "^7.1.3",
    "@types/node": "^14.6.0",
    "express": "^4.17.1",
    "glob": "^7.1.6",
    "module-alias": "^2.2.2",
    "reflect-metadata": "^0.1.13",
    "sqlite3": "^5.0.0",
    "ts-loader": "^8.0.2",
    "typeorm": "^0.2.25",
    "typescript": "^4.0.2"
  }
}


// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2017",
    "module": "ESNext",
    "lib": ["ES2015"],
    "strict": true,
    "strictPropertyInitialization": false,
    "moduleResolution": "node",
    "baseUrl": ".",
     "paths": {
       "@root/*": ["./*"]
     },
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}


// main.ts
import express from 'express'
const app = express();
app.listen(3000);

UPD:

Here is the full text of the error

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/admin/web/31_MyCMS2/webpack.config.js require() of ES modules is not supported. require() of /home/admin/web/31_MyCMS2/webpack.config.js from /usr/lib/node_modules/webpack-cli/bin/utils/convert-argv.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 webpack.config.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/admin/web/31_MyCMS2/package.json.


Renamed webpack. config.js => webpack.config.mjs

Added the webpack.config.cjs file:

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

Calling webpack --config webpack.config.cjs --node-arg="--experimental-modules --experimental-vm-modules"

Mistake:

TypeError: Invalid host defined options at module.exports (/home/admin/web/31_MyCMS2/webpack.config.cjs:2:18)
Author: A K, 2020-08-23

1 answers

Renamed webpack. config again.js => webpack.config.cjs
Changed the content of webpack. config.cjs:

Const path = require('path')

module.exports = {
  mode: 'development',
  target: 'node',
  entry: ['./main.ts'],
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
  rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

In this form, everything works!

 0
Author: Cat Grey, 2020-08-23 17:36:00