不允许按需加载初始块。块名称 "main" 已被入口点使用

Question

我正在使用 webpack 开发服务器端 react-node 项目。我在控制台上有太多错误，从昨天开始我一直无法弄清楚。我希望有人花时间帮助我。这是最后一个错误：

ERROR in ./src lazy ^\.\/.*$ namespace object ./main
    It's not allowed to load an initial chunk on demand. The chunk name "main" is already used by an entrypoint.

主要问题是带有 node.js 的 webpack。

这里是服务器设置：

import express from "express";
const server = express();
import path from "path";
// const expressStaticGzip = require("express-static-gzip");
import expressStaticGzip from "express-static-gzip";
import webpack from "webpack";
import webpackHotServerMiddleware from "webpack-hot-server-middleware";

import configDevClient from "../../config/webpack.dev-client";
import configDevServer from "../../config/webpack.dev-server.js";
import configProdClient from "../../config/webpack.prod-client.js";
import configProdServer from "../../config/webpack.prod-server.js";

const isProd = process.env.NODE_ENV === "production";
const isDev = !isProd;
const PORT = process.env.PORT || 8000;
let isBuilt = false;

const done = () => {
  !isBuilt &&
    server.listen(PORT, () => {
      isBuilt = true;
      console.log(
        `Server listening on http://localhost:${PORT} in ${process.env.NODE_ENV}`
      );
    });
};

if (isDev) {
  const compiler = webpack([configDevClient, configDevServer]);

  const clientCompiler = compiler.compilers[0];
  const serverCompiler = compiler.compilers[1];

  const webpackDevMiddleware = require("webpack-dev-middleware")(
    compiler,
    configDevClient.devServer
  );

  const webpackHotMiddlware = require("webpack-hot-middleware")(
    clientCompiler,
    configDevClient.devServer
  );

  server.use(webpackDevMiddleware);
  server.use(webpackHotMiddlware);
  server.use(webpackHotServerMiddleware(compiler));
  console.log("Middleware enabled");
  done();
} else {
  webpack([configProdClient, configProdServer]).run((err, stats) => {
    const clientStats = stats.toJson().children[0];
    const render = require("../../build/prod-server-bundle.js").default;
    server.use(
      expressStaticGzip("dist", {
        enableBrotli: true
      })
    );
    server.use(render({ clientStats }));
    done();
  });
}

Here is the repo

Answer 1

您应该通过将 src/main.js 重命名为其他名称（例如 src/index.js）来解决上述问题。确保也更新 webpack 配置中的入口点：

main: [
    ...
    "./src/index.js"
]

我没有深入研究代码，也不确定是什么原因造成的，但根据错误日志，生成的块中似乎存在名称冲突。

修复入口点后还会弹出其他问题。例如，看起来您在针对网络环境时使用了一些带有节点二进制文件的包。一个例子是 iltorb，它是 BrotliPlugin.

的依赖项

Answer 2

我克隆了你的代码并安装了它的包，并根据你在客户端上得到的 fs 错误的屏幕截图错误，你应该将以下键值添加到你的客户端 webpack 配置文件中：

module.exports = {
  name: "client",
  mode: "development",
  node: {
    module: 'empty',
    dgram: 'empty',
    dns: 'mock',
    fs: 'empty',
    http2: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty',
  },
  ~~~

并且还基于问题 post 中提到的错误，您复制了入口点，因此您应该通过将其重命名为 index.js 或您想要的任何其他名称来修复它，但请注意那：你应该更改 webpack 配置文件中的入口点：

// development
  ~~~
  entry: {
    vendor: ["react", "react-dom"],
    main: [
      // "react-hot-loader/patch",
      // "babel-runtime/regenerator",
      // "webpack-hot-middleware/client?reload=true",
      "./src/index.js"
    ]
  },

和

// production
  name: "client",
  entry: "./src/index.js",

进行这些更改后，您收到一个奇怪的警告：

[BABEL] Note: The code generator has deoptimised the styling of /Users/amerllica/VimProjects/webpack-server-side-rendering/build/prod-server-bundle.js as it exceeds the max of 500KB

您应该使用 :

修复它

// .babelrc
  "env": {
    "development": {
      "plugins": ["react-hot-loader/babel"],
      "compact": false // <==== adding this line
    }
  }

然后我得到 TerserPlugin 错误，我忽略了它，但是在这里 我震惊了 因为它存在于生产配置文件中，当我使用 dev 脚本命令。对了，我省略了。

毕竟通过输入 npm run dev 或 yarn dev 命令我收到了很多警告消息，错误如下：

ERROR in ./node_modules/iltorb/build/bindings/iltorb.node 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    (Source code omitted for this binary file)

我真的不知道这个错误是什么以及为什么 iltorb.node 二进制文件存在于 JavaScript 项目中。

提示：如果我处在你的位置，我肯定会放弃这个嘈杂的配置并遵循clean SSR config。此 SSR 配置看起来像您的配置，但方式正确。你的代码救赎无望了。

不允许按需加载初始块。块名称 "main" 已被入口点使用

It's not allowed to load an initial chunk on demand. The chunk name "main" is already used by an entrypoint

javascript

server-side

node.js

reactjs

webpack