代码之家 › 专栏 › 技术社区 › Yilmaz

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

server-side webpack reactjs node.js javascript

Yilmaz · 技术社区 · 4 年前

我正在用这个webpack处理一个服务器端react节点项目。我在控制台上有太多的错误,从昨天起我就没能弄清楚。我希望有人花时间来帮助我。这是最后一个错误:

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.

主要的问题是有点像一个有节点的网页包。

以下是服务器设置:

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

0 回复 | 直到 4 年前

AmerllicA 4 年前

我克隆了你的代码,安装了它的软件包,并根据你得到的截图错误 fs 客户端出错,应将以下键值添加到客户端网页包配置文件中:

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配置看起来像您的配置,但方式正确。你的代码拯救是没有希望的。

kaveh 4 年前

你应该通过改名来解决上述问题 src/main.js 去别的地方,比如 src/index.js . 请确保在webpack config中也更新入口点:

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

我没有仔细查看代码,也不确定是什么原因造成的,但根据错误日志,生成的块中似乎存在名称冲突。

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