使用 Node、Webpack、React、Express、Material UI、React Router 的 SSR - 错误 [ERR_REQUIRE_ESM]：必须使用导入来加载 ES 模块

Question

在尝试了几天没有成功之后，我正在写这篇文章 post。

我想将服务器端呈现 (SSR) 添加到我的应用程序中。我跟随 this tutorial 直到我必须调用 npm run build。我总是收到以下错误：

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.

我认为 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];

我的 package.json 文件：

{
  "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"
  }
}

如果您需要任何进一步的信息，请告诉我，我会尽快答复。我对这个问题真的很沮丧:(

Answer 1

我遇到了类似的问题。唯一的出路是将 @babel/runtime 添加到白名单 webpack-node-externals。更多详情：https://www.npmjs.com/package/webpack-node-externals.

Answer 2

我找到了我的问题...这是我的错。我有两个目录（./ 和 ./client）。我开始在 ./client 中使用 npm 开发前端，然后转到服务器并将所有 npm 包移动到 ./ 但忘记删除 ./client 中的 @node_modules 文件夹。删除它解决了我的问题

使用 Node、Webpack、React、Express、Material UI、React Router 的 SSR - 错误 [ERR_REQUIRE_ESM]：必须使用导入来加载 ES 模块

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

javascript

node.js

reactjs

webpack

babel-loader