不允许按需加载初始块。块名称“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();
  });
}

这是回购

Answer 1

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

\n\n

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

\n\n

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

\n\n

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

\n\n

和

\n\n

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

\n\n

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

\n\n

[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\n

\n\n

你应该使用这个答案来修复它：

\n\n

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

\n\n

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

\n\n

毕竟，通过键入npm run dev或yarn dev命令，我收到了很多带有以下错误的警告消息：

\n\n

ERROR in ./node_modules/iltorb/build/bindings/iltorb.node 1:0\nModule parse failed: Unexpected character \'\xef\xbf\xbd\' (1:0)\nYou 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\n    (Source code omitted for this binary file)\n

\n\n

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

\n\n

提示：如果我处于你的位置，我肯定会放弃这种嘈杂的配置并遵循干净的 SSR 配置。此 SSR 配置看起来像您的配置，但方式正确。你的代码没有拯救的希望。

\n