typescript - ReferenceError: require ES modül kapsamı içinde tanımlı değil

Typescript projesinde webpack 5 konfigürasyonunu şöyle ekledim:

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$/
      }
    ]
  }
};

ama projeyi derlemek için bu komutu kullandığımda:

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

hata gösterir:

[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.

Webpack yapılandırmasını ES6'yı destekleyecek şekilde nasıl değiştiririm? Google'da arıyorum ama hiçbir ipucu bulamadım. Webpack yapılandırmasını ES6 ile uyumsuz hale getirmek mümkün mü?

Cevap #1

Hata, projenizde ES modülü kullandığınızı, ancak require'nin CommonJS import yöntemi olduğunu gösteriyor, bu yüzden şu şekilde ES modülü import yöntemini kullanmayı deneyin:

import webpack from 'webpack';

ve bu şekilde dışa aktar:

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

İlgili makaleler