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

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

最佳答案

我克隆了代码并安装了它的软件包，并根据屏幕截图错误在客户端上出现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)

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

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