SSR with Node, Webpack, React, Express, Material UI, React Router - Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

Question

after trying several days without success I am writing this post.

I want to add server side rendering (SSR) to my application. I followed this tutorial until the point I have to call npm run build. I always get the following error:

node:internal/modules/cjs/loader:1126
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /<PATH_HERE>/node_modules/@babel/runtime/helpers/esm/extends.js
require() of ES modules is not supported.
require() of /<PATH_HERE>/node_modules/@babel/runtime/helpers/esm/extends.js from /<PATH_HERE>/dist/main.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 extends.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /<PATH_HERE>/node_modules/@babel/runtime/helpers/esm/package.json.

I think it's something with the webpack.config.js:

const nodeExternals = require("webpack-node-externals");
//import nodeExternals from "webpack-node-externals"

const common = {
  devtool: "cheap-module-source-map",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: {
          loader: "babel-loader", // asks bundler to use babel loader to transpile es2015 code
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
        exclude: [/node_modules/, /public/],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf)(\?[a-z0-9=.]+)?$/,
        use: "url-loader?limit=100000",
      },
      {
        test: /\.svg$/,
        use: ["@svgr/webpack"],
      },
    ],
  },
};

const clientConfig = {
  ...common,
  entry: "./client/src/index",
  output: {
    path: `${__dirname}/public`,
  },
};

const serverConfig = {
  ...common,
  target: "node",
  externals: [nodeExternals()],
  entry: "./server.js",
  output: {
    path: `${__dirname}/dist`,
  },
};

module.exports = [clientConfig, serverConfig];

My package.json file:

{
  "name": "Website Name",
  "version": "1.0.0",
  "description": "My Website",
  "main": "dist/main.js",
  "module": "dist/main.js",
  "scripts": {
    "client-install": "npm install --prefix client",
    "start": "NODE_ENV=production node dist/main.js",
    "build": "rm -rf dist public && webpack --mode production --progress",
    "server": "nodemon server.js",
    "heroku-postbuild": "npm install --prefix client && npm run build",
    "dev": "rm -rf dist public && webpack --mode development --progress"
  },
  "author": "It's me",
  "license": "MIT",
  "dependencies": {
    "@babel/runtime": "^7.14.0",
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/styles": "^4.11.4",
    "@svgr/webpack": "^5.5.0",
    "bcrypt": "^5.0.0",
    "cjs-loader": "^0.1.0",
    "compression": "^1.7.4",
    "concurrently": "^5.3.0",
    "cors": "^2.8.5",
    "css-loader": "^5.2.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "file-loader": "^6.2.0",
    "humps": "^2.0.1",
    "ignore-styles": "^5.0.1",
    "jsonwebtoken": "^8.5.1",
    "lodash": "^4.17.21",
    "mongoose": "^5.11.8",
    "normalizr": "^3.6.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hot-loader": "^4.13.0",
    "react-router": "^6.0.0-beta.0",
    "redux": "^4.1.0",
    "redux-logger": "^3.0.6",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-transform-runtime": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "babel-plugin-import": "^1.13.3",
    "babel-plugin-transform-assets": "^1.0.2",
    "html-webpack-plugin": "^5.3.1",
    "nodemon": "^2.0.4",
    "npm-run-all": "^4.1.5",
    "react-jss": "^10.6.0",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3",
    "webpack-node-externals": "^3.0.0"
  }
}

If you need any further information just let me know I will answer as soon as possible. I am really frustrated about the issue :(

Answer 1

I found the problem for me... It was my fault. I had two directories (./ and ./client). I started developing the frontend with npm in ./client and then went to the server and moved all npm packages to ./ but forgot to delete the @node_modules folder in ./client. Deleting it solved the problem for me