It's not allowed to load an initial chunk on demand. The chunk name "main" is already used by an entrypoint

Question

I am working on a server-side react-node project with the webpack. I had too many errors on the console I have not been able to figure out since yesterday. I hope someone spends time and help me out. this is the last error :

Click to copy

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.

the main problem is kinda webpack with node.

here is the server set up:

Click to copy

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

I clone your code and install its packages and based the screenshot error you got fs error on client, and you should add the below key value to your client webpack configuration file:

Click to copy

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

And also based on the mentioned error in the question post you duplicate the entry point so you should fix it by renaming it to something else like index.js or anything else you want, but note that: you should change the entry point in the webpack config file:

Click to copy

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

And

Click to copy

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

After these changes, you got a weird warning:

Click to copy

[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

And you should fix it by using this answer:

Click to copy

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

Then I got TerserPlugin error and I omit it, But here I shocked because it existed inside production configuration file, it was while I use dev script command. by the way, I omit it.

After all by typing npm run dev or yarn dev command I got a lot of warning messages with the below error:

Click to copy

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)

And really I don't know what is this error and why iltorb.node binary file existed in the JavaScript project.

HINT: If I was in your place I definitely abandon this noisy config and follow a clean SSR config. this SSR config looks like your configuration but in the right way. there is no hope for your code salvation.