不允许按需加载初始块。入口点已经使用了块名称“ main”

Question

bounty到期在2天内。该问题的答案有资格获得+ 100声望赏金。Yilmaz正在寻找规范答案：

我还没有解决这个问题3天。我需要帮助才能进步。

我正在使用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.

主要问题是带有节点的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"
]

我没有仔细研究代码，也不知道是什么原因引起的，但是基于错误日志，似乎在生成的块中存在名称冲突。

修复入口点后还会弹出其他问题。例如，看起来您在针对Web环境使用某些带有二进制节点的软件包。一个示例是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',
  },
  ~~~

并且还基于问题中提到的错误，您复制了入口点，因此您应通过将其重命名为其他名称（例如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

并且您应该使用this answer来解决它：

// .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)

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

HINT：如果我在您的位置，我绝对会放弃此嘈杂的配置，并遵循clean SSR config。此SSR配置看起来像您的配置，但使用的方式正确。您的代码得救是没有希望的。