Many empty chunk files generated

[mgrabovsky]

Describe the bug

Our CRA build creates dozens of practically empty JS chunk files. This causes loading of unnecessary files in the browser and a laggy startup of the app.

Here's the relevant part of the output from the build:

$ npm run build
> [email protected] build /www
> react-scripts build

Creating an optimized production build...
[...]
File sizes after gzip:

  457.1 kB  build/static/js/main.a161bc98.js
  15.43 kB  build/static/css/main.c51b3e03.css
  5.66 kB   build/static/css/94.ee027137.chunk.css
  5.54 kB   build/static/css/433.0606e674.chunk.css
  4.16 kB   build/static/css/527.81d56ed6.chunk.css
  3.85 kB   build/static/css/992.031e89d8.chunk.css
  3.83 kB   build/static/css/805.5a01d809.chunk.css
  3.75 kB   build/static/css/144.70f1d096.chunk.css
  3.73 kB   build/static/css/577.a7911fdb.chunk.css
  3.64 kB   build/static/css/206.1397490c.chunk.css
  3.45 kB   build/static/css/60.8e137b19.chunk.css
  3.43 kB   build/static/css/880.86bb0c78.chunk.css
  3.42 kB   build/static/css/219.1904c777.chunk.css
  3 kB      build/static/css/796.ef16d86f.chunk.css
  2.83 kB   build/static/css/707.c138d4cb.chunk.css
  2.78 kB   build/static/css/774.dcf436a4.chunk.css
  2.72 kB   build/static/css/294.81d69334.chunk.css
  2.29 kB   build/static/css/177.167f90be.chunk.css
  2.09 kB   build/static/css/660.66d08752.chunk.css
  1.69 kB   build/static/css/929.53758cbc.chunk.css
  1.67 kB   build/static/js/787.aefc0e37.chunk.js
  1.67 kB   build/static/css/395.0d9f7c65.chunk.css
  1.52 kB   build/static/css/851.c7480e16.chunk.css
  1.41 kB   build/static/css/978.a4915bae.chunk.css
  1.37 kB   build/static/css/797.d18fd451.chunk.css
  1.36 kB   build/static/css/377.72a1ae84.chunk.css
  1.2 kB    build/static/css/793.09020175.chunk.css
  1.14 kB   build/static/css/437.6d707dbc.chunk.css
  992 B     build/static/css/932.fbfac2f6.chunk.css
  966 B     build/static/css/976.d4b9f83e.chunk.css
  950 B     build/static/css/680.8c3aa1d4.chunk.css
  891 B     build/static/css/567.e73292c9.chunk.css
  854 B     build/static/css/310.16f255c3.chunk.css
  838 B     build/static/css/74.61738d43.chunk.css
  785 B     build/static/css/548.2b967766.chunk.css
  652 B     build/static/css/974.160fa5f7.chunk.css
  617 B     build/static/css/409.03f11c21.chunk.css
  594 B     build/static/css/2.b4308ae9.chunk.css
  556 B     build/static/css/730.612adc36.chunk.css
  553 B     build/static/css/876.faa7911e.chunk.css
  528 B     build/static/css/68.e2d29a2b.chunk.css
  436 B     build/static/css/114.6dde383f.chunk.css
  412 B     build/static/css/152.3fe81e03.chunk.css
  366 B     build/static/css/954.7eedf6d5.chunk.css
  334 B     build/static/css/35.88faa5aa.chunk.css
  244 B     build/static/css/350.dd9098ed.chunk.css
  172 B     build/static/css/689.a379efd4.chunk.css
  165 B     build/static/js/680.13fa8131.chunk.js
  165 B     build/static/js/774.b90ff1df.chunk.js
  164 B     build/static/js/114.21002f98.chunk.js
  164 B     build/static/js/144.596a3f57.chunk.js
  164 B     build/static/js/152.68d2efb8.chunk.js
  164 B     build/static/js/294.1db33283.chunk.js
  164 B     build/static/js/350.ce89e043.chunk.js
  164 B     build/static/js/395.df812221.chunk.js
  164 B     build/static/js/409.6697ebba.chunk.js
  164 B     build/static/js/527.602365b9.chunk.js
  164 B     build/static/js/548.63d299fb.chunk.js
  164 B     build/static/js/567.6c766379.chunk.js
  164 B     build/static/js/660.ab38f446.chunk.js
  164 B     build/static/js/707.a1b336c1.chunk.js
  164 B     build/static/js/730.0cb182c1.chunk.js
  164 B     build/static/js/793.456e26af.chunk.js
  164 B     build/static/js/841.b69340ae.chunk.js
  164 B     build/static/js/851.68e6e520.chunk.js
  164 B     build/static/js/880.12bc5965.chunk.js
  164 B     build/static/js/929.30a78b30.chunk.js
  164 B     build/static/js/932.790fb1dd.chunk.js
  164 B     build/static/js/954.8976428b.chunk.js
  164 B     build/static/js/976.0543009e.chunk.js
  164 B     build/static/js/978.12725415.chunk.js
  164 B     build/static/js/992.3464fb79.chunk.js
  163 B     build/static/js/177.1610bacd.chunk.js
  163 B     build/static/js/206.6527e066.chunk.js
  163 B     build/static/js/689.7d1d5c0e.chunk.js
  163 B     build/static/js/796.23ecdff7.chunk.js
  163 B     build/static/js/876.0b6cba26.chunk.js
  163 B     build/static/js/310.a8b8bb85.chunk.js
  163 B     build/static/js/377.5b39bb64.chunk.js
  163 B     build/static/js/437.f7db13c8.chunk.js
  163 B     build/static/js/530.f3f84802.chunk.js
  163 B     build/static/js/577.1b3993c3.chunk.js
  163 B     build/static/js/974.0b3d42b5.chunk.js
  162 B     build/static/js/219.27a791ae.chunk.js
  162 B     build/static/js/797.6cbb5ca5.chunk.js
  162 B     build/static/js/35.3d2dfe0d.chunk.js
  162 B     build/static/js/68.d4acc998.chunk.js
  162 B     build/static/js/74.8d21c6cc.chunk.js
  161 B     build/static/js/543.adfbebd3.chunk.js
  161 B     build/static/js/60.ce6ee642.chunk.js
  161 B     build/static/js/2.53389326.chunk.js

All the smallest files looks like this, i.e. there's no substantive content, they're just empty shells:

"use strict";(self.webpackChunkciboard=self.webpackChunkciboard||[]).push([[567],{1567:function(c,e,u){u.r(e),e.default={}}}]);
//# sourceMappingURL=567.6c766379.chunk.js.map

Did you try recovering your dependencies?

Yes, here's npm --version:

$ npm --version
8.13.1

Which terms did you search for in User Guide?

I've tried searching for "chunks", "chunk files", "code splitting", "webpack", "webpack config", "chunk.js", "chunk.css" and a few other terms. I also tried several related Google searches but came up with nothing. I tried searching around the mini-css-extract-plugin webpack plugin as well, as that seemed to me to be somewhat relevant, but found no working solution.

Environment

Environment Info:

  current version of create-react-app: 5.0.1
  running from /opt/app-root/src/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: Linux 5.18 Red Hat Enterprise Linux 8.4 (Ootpa)
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
  Binaries:
    Node: 14.17.3 - /usr/bin/node
    Yarn: Not Found
    npm: 8.13.1 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    react-scripts: 5.0.0 => 5.0.0 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

I don't know how to reproduce this minimally yet, but the build scripts are available in our repository. Moreover, the problem is reproduced on every commit when we build our Docker image in GitHub CI, as you can see from the logs.

Expected behavior

At the very least, I would expect there would be no such "empty" chunk files as they seem to only take up space and they serve literally no function.

Ideally, I would expect there to be an option to only generate a single file, but that's not the subject of this ticket.

Actual behavior

Many "empty" .chunk.js files are generated and loaded in the browser. See the first section above.

Reproducible demo

The source code of the app is available on GitHub.

[mgrabovsky]

Any idea about this one?

[antaradatta3]

I am facing the same issue but with the css chunk files.

[virgilbugnariu]

By any chance, do you have any @formatjs packages installed?

"@formatjs/intl-getcanonicallocales"
"@formatjs/intl-locale"
"@formatjs/intl-numberformat"
"@formatjs/intl-pluralrules"

[mgrabovsky]

Somehow, the issue has resolved it for us after a couple upgrades. I'm closing as I don't believe this is going to get any attention from the developers in this repository.