ReferenceError: require is not defined in ES module scope

user_18157326 0
Viewed 2617

I added the webpack 5 config like this in the typescript project:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry : {
    'index' : './index.ts', 
  } ,
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    alias: {
        vue: 'vue/dist/vue.esm-bundler.js',
        '@': path.resolve(__dirname, '../../../src'),
    },
  },
  output : {
    path : path.resolve(__dirname, '../../bundle') ,
    filename : '[name].js'
  },
  module : {
    rules : [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        },
        include: [
          path.resolve(__dirname, '../../../node_modules/js-wheel'),
          path.resolve(__dirname, '../../../src')
        ],
        exclude: /node_modules|\.d\.ts$/
      }
    ]
  }
};

but when I use this command to build the project:

"build": "rm -rf dist && webpack --mode development --config src/config/webpack.config.js",

shows error:

[webpack-cli] ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/Users/xxx/source/dwarf/frontend/js/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

how to change the webpack config to support ES6? I am searching from google but did not found any clue. is it possible to transform the webpack config incompatible with ES6?

webpack-5 typescript
1 Answers

The error shows that you are using ES module in your project, but the require are CommonJS import way, so try to using the ES module import way like this:

import webpack from 'webpack';

and export like this:

export default {
  entry : {
    'index' : './index.ts', 
  } 
}
user_26288680
Related