Не разрешается загружать начальный блок по требованию. Имя чанка "main" уже используется точкой входа

Question

Я работаю над серверным проектом реагирующего узла с веб-пакетом. У меня было слишком много ошибок на консоли, которые я не смог выяснить со вчерашнего дня. Я надеюсь, что кто-то тратит время и помогает мне. это последняя ошибка:

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();
  });
}

Вот репо

Answer 1

Я клонирую ваш код и устанавливаю его пакеты, и на основе ошибки скриншота вы получили ошибку 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

И вам следует исправить с помощью этого ответа :

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

Затем я получил TerserPlugin ошибку, и я ее опускаю, но здесь Я шокировал , потому что она существовала в файле рабочей конфигурации , это было в то время как я использую команду dev script. кстати, я его опускаю.

В конце концов, набрав команду 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.

HINT : Если бы я был на вашем месте, я бы определенно отказался от этого Шумная конфигурация и следуйте чистой конфигурации SSR . эта конфигурация SSR выглядит как ваша конфигурация, но в правильном направлении. нет надежды на спасение вашего кода.

Answer 2

Вы должны пройти вышеупомянутую проблему, переименовав src/main.js во что-то другое, например src/index.js. Обязательно обновите также точки входа в конфигурации веб-пакета:

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

Я не особо разбирался в коде, и я не уверен, что вызывает это, но на основании журнала ошибок, похоже, что есть конфликт имен в сгенерированных чанках.

Есть и другие проблемы, которые появляются после исправления точки входа. Например, похоже, что вы используете некоторые пакеты с двоичным узлом при настройке веб-среды. Примером является iltorb, который является зависимостью BrotliPlugin.