Bug: deleteOrigianlAssets: true breaks the build badly...

[mman]

Bug report

Created an empty npx create-react-app@latest webpack-compress-test, added this plugin and broke the build.

Looks like CompressionPlugin is racing with HtmlWebpackPlugin and deletes original .js files too early... before HtmlWebpackPlugin gets a chance to process them.

Steps to reproduce:

1. Create new react app:

€ npx create-react-app@latest webpack-compress-test

Creating a new React app in /Users/mman/Developer/webpack-compress-test.

Installing packages. This might take a couple of minutes.
...

2. Add compression plugin dependency:

€ npm install compression-webpack-plugin --save-dev
added 5 packages, and audited 1561 packages in 2s
...

3. Eject config to get access to webpack.config.js

€ npm run eject

> [email protected] eject
> react-scripts eject

NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

✔ Are you sure you want to eject? This action is permanent. … yes
Ejecting...
...

4. Try to build:

€ npm run build

> [email protected] build
> node scripts/build.js

Creating an optimized production build...
Compiled successfully.
...

5. Examine output:

€ ls -l build/static/js 
total 1064
-rw-r--r--  1 mman  staff    4542 May 22 12:42 453.80dd94dc.chunk.js
-rw-r--r--  1 mman  staff   10597 May 22 12:42 453.80dd94dc.chunk.js.map
-rw-r--r--  1 mman  staff  143827 May 22 12:42 main.2663d1cb.js
-rw-r--r--  1 mman  staff     971 May 22 12:42 main.2663d1cb.js.LICENSE.txt
-rw-r--r--  1 mman  staff  371868 May 22 12:42 main.2663d1cb.js.map

6. Enable compression plugin:

Now modify the config/webpack.config.js and enable compression plugin as the last step to compress everything.

+const CompressionPlugin = require("compression-webpack-plugin");

...
+        new CompressionPlugin({
+          threshold: 0,
+          deleteOriginalAssets: true,
+        })
+

7. Try to build:

€ npm run build

> [email protected] build
> node scripts/build.js

Creating an optimized production build...
Failed to compile.

Cannot destructure property 'info' of 'compilation.getAsset(...)' as it is undefined.

Actual Behavior

Build fails:

€ npm run build

> [email protected] build
> node scripts/build.js

Creating an optimized production build...
Failed to compile.

Cannot destructure property 'info' of 'compilation.getAsset(...)' as it is undefined.

Expected Behavior

Build should succeed with all files being .gzipped

How Do We Reproduce?

See the detailed steps above.

The repo contains broken code: https://github.com/mman/webpack-compress-test
The commit here enables the compression: mman/webpack-compress-test@6ba1e3c

[alexander-akait]

I see, I will fix soon

[alexander-akait]

I think we will need a fix in html-webpack-plugin too, I will investigate tomorrow deeply and provide fixes for html-webpack-plugin too

[alexander-akait]

You can fix it using test: /\.(js|css)$/,, something wrong in manifest-webpack-plugin (looks like a wrong hook)

[mman]

Any progress on this one? How can I help?

[alexander-akait]

Still on my roadmap, bug in webpack, I will fix soon

[mman]

just a friendly ping

[alexander-akait]

Yeah, please use test: /\.(js|css)$/ right now, need debug when manifest-webpack-plugin breaks the build...