Webpack Error when trying to run reactJS app (w. typescript)

user_12083937 0
Viewed 1452

I'm trying to get webpack to work in my ReactJS & typescript app but I'm getting this error, and I can't figure out what I am missing. I've got a webpack.config.js file, shown further down and I have tsconfig.json and my scripts from package.json, seen further down:

Error Message

    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.

This is how my webpack config file looks, can provide more code if needed. webpack.config.js

    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'
        })


    ]
};

package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production",
    "eject": "react-scripts eject",
    "start:build": "tsc -w",
    "start:run": "nodemon src/index.js",
    "dev": "concurrently npm:start:*",
    "bundle": "webpack"
  },
package.json webpack typescript reactjs
2 Answers

What Node version you are using? I resolved the same error by changing node version to 12.10.0

depending upon your OS install NVM and then

nvm install 12.10.0
nvm use 12.10.0

then restart your terminal.

user_35990530

TL;DR: Remove the "type": "module" from the package.json file. That should solve the problem.

If type field is set to module then, it expects every .js file in your directory to be of ESModule type instead of CommonJS. It also means webpack.config.js and other webpack helper files like loaders which are loaded dynamically by Webpack using CommonJS/Node.js require() must be of ESModule as well.

Removing this field from the package.json should not impact as long as you are building for an application.

Authoring for libraries

If you are building/authorizing a library for NPM distribution, then it is a different story. If you intend to publish entire library as set of ESModules, then removal is not an option for you.

To solve library issue, you can use alternative approach of renaming Webpack config file to webpack.config.cjs. The .cjs extension tells Node that it is a CommonJS module even if package.json has "type": "module set.

user_57230980
Related