Question

我正在尝试使Webpack在我的ReactJS和打字稿应用程序中工作，但出现此错误，并且我无法弄清缺少的内容。我有一个webpack.config.js文件，显示在更下方，我有tsconfig.json和package.json中的脚本，在更下方显示：

错误消息

null

这是我的webpack配置文件的外观，可以在需要时提供更多代码。 webpack.config.js

    C:\Users\perni\Projects\typescript_project\react-crud>yarn start
yarn run v1.19.1
$ webpack-dev-server --mode development --open --hot
(node:15192) Warning: require() of ES modules is not supported.
require() of C:\Users\perni\Projects\typescript_project\react-crud\webpack.config.js from C:\Users\perni\Projects\typescript_project\react-crud\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 C:\Users\perni\Projects\typescript_project_inspired\react-crud\package.json.
internal/modules/cjs/loader.js:1156
      throw new ERR_REQUIRE_ESM(filename);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\perni\Projects\typescript_project_inspired\react-crud\webpack.config.js
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1156:13)
    at Module.load (internal/modules/cjs/loader.js:976:32)
    at Function.Module._load (internal/modules/cjs/loader.js:884:14)
    at Module.require (internal/modules/cjs/loader.js:1016:19)
    at require (internal/modules/cjs/helpers.js:69:18)
    at WEBPACK_OPTIONS (C:\Users\perni\Projects\typescript_project_inspired\react-crud\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13)
    at requireConfig (C:\Users\perni\Projects\typescript_project_inspired\react-crud\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6)
    at C:\Users\perni\Projects\typescript_project_inspired\react-crud\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17
    at Array.forEach (<anonymous>)
    at module.exports (C:\Users\perni\Projects\typescript_project_inspired\react-crud\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15) {
  code: 'ERR_REQUIRE_ESM'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

package.json

    const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
// webpack will take the files from ./src/index
    entry: './src/index',
// and output it into /dist as bundle.js
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
// adding .ts and .tsx to resolve.extensions will help babel look for .ts and .tsx files to transpile
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [
// we use babel-loader to load our jsx and tsx files
            {
                test: /\.(ts|js)x?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                },
            },
// css-loader to bundle all the css files into one file and style-loader to add all the styles  inside the style tag of the document
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
                exclude: /node_modules/,
                use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
            }
        ]
    },
    devServer: {
        historyApiFallback: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            favicon: './public/favicon.ico'
        })


    ]
};

Answer 1

您使用的是哪个节点版本？我通过将节点版本更改为nvm install 12.10.0 nvm use 12.10.0

解决了相同的错误

根据您的操作系统安装NVM，然后

int1, int2, int3, int4, int5 = 5, 10, 20, 15, 5

line = [ int1, int2, int3, int4, int5]

然后重新启动终端。

Answer 2

<块引用>

TL;DR：从 package.json 文件中删除 "type": "module"。那应该可以解决问题。

如果 type 字段设置为 module，那么它期望您目录中的每个 .js 文件都是 ESModule 类型而不是 CommonJS。这也意味着 webpack.config.js 和其他 webpack helper 文件，例如由 Webpack 使用 CommonJS/Node.js 动态加载的加载器 require() 也必须属于 ESModule。

从 package.json 中删除此字段应该不会产生影响，只要您是为应用程序构建。

为图书馆创作

如果您正在为 NPM 分发构建/授权库，那么情况就不同了。如果您打算将整个库作为一组 ESModules 发布，那么删除不是您的选择。

要解决库问题，您可以使用替代方法将 Webpack 配置文件重命名为 webpack.config.cjs。 .cjs 扩展告诉 Node 它是一个 CommonJS 模块，即使 package.json 设置了 "type": "module。

尝试运行reactJS应用时出现Webpack错误（带有打字稿）

2 个答案:

为图书馆创作