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 :

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:

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

Chickenhearted

I've looked at this question for a few minutes and it's giving me anxiety. The "production" code doesn't look right, as it appears to be trying to use a bundle as middleware, which won't work. How I've done this in the past is to build/pack every view into its own file, and use a middleware that renders the view to string ReactDOMServer.renderToString(element) – Rosariorosarium

Are you intentionally requesting the module at that path ? ......./webpack/node_modules/webpack/node_modules/.....? Is that where the resource is actually located? – Mahmoud

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:

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:

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

And

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

After these changes, you got a weird warning:

[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:

// .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:

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.

Perishing

Can you please tell me the point of vendor array inside entry object. I have a hard time understanding what that does. Usually i see people place react,react-dom but you almost placed all of your modules. – Chickenhearted

Answer 2

You should get passed the mentioned issue by renaming src/main.js to something else, like src/index.js. Make sure to update the entrypoints in webpack config too:

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

I didn't look much into the code and I'm not sure what's causing this, but based on the error log, it looks like there's a name conflict in the generated chunks.

There are also other issues that pop up after fixing the entrypoint. For example, it looks like you're using some packages with node binary while targeting a web environment. An example is iltorb, which is a dependency of BrotliPlugin.

Carnassial