Html-webpack-plugin: Webpack 5 "BREAKING CHANGE" warning

Created on 28 Aug 2020  ·  21Comments  ·  Source: jantimon/html-webpack-plugin

Expected behaviour

The excellent plugin should work with webpack 5 without deprecation notices

Current behaviour

94% sealing after seal(node:15584) [DEP_WEBPACK_MAIN_TEMPLATE_GET_ASSET_PATH] DeprecationWarning: MainTemplate.getAssetPath is deprecated (use Compilation.getAssetPath instead)
    at D:\fun-project\node_modules\html-webpack-plugin\lib\child-compiler.js:163:41
    at Array.map (<anonymous>)
    at extractHelperFilesFromCompilation (D:\fun-project\node_modules\html-webpack-plugin\lib\child-compiler.js:162:45)
    at D:\fun-project\node_modules\html-webpack-plugin\lib\child-compiler.js:113:13
    at D:\fun-project\node_modules\webpack\lib\Compiler.js:486:11
    at D:\fun-project\node_modules\webpack\lib\Compiler.js:981:17
    at eval (eval at create (D:\fun-project\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:11:1)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
95% emitting emit HtmlWebpackPlugin(node:15584) [DEP_WEBPACK_MAIN_TEMPLATE_GET_PUBLIC_PATH] DeprecationWarning: MainTemplate.getPublicPath is deprecated (use Compilation.getAssetPath(compilation.outputOptions.publicPath, options) instead)
    at HtmlWebpackPlugin.htmlWebpackPluginAssets (D:\fun-project\node_modules\html-webpack-plugin\index.js:532:56)
    at D:\fun-project\node_modules\html-webpack-plugin\index.js:164:29
    at Hook.eval [as callAsync] (eval at create (D:\fun-project\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:10:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (D:\fun-project\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)
    at Compiler.emitAssets (D:\fun-project\node_modules\webpack\lib\Compiler.js:729:19)
    at D:\fun-project\node_modules\webpack\lib\Compiler.js:392:10
    at processTicksAndRejections (internal/process/task_queues.js:79:11)
95% emitting emit(node:15584) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
    at D:\fun-project\node_modules\html-webpack-plugin\index.js:273:49
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

Seems like the first 2 warnings are covered by #1408

Environment

Node.js v12.18.2
win32 10.0.18362
npm 6.14.5
[email protected]
[email protected]

Config

module.exports = {
  context: path.resolve(__dirname, 'src'),
  mode: 'development',
  entry: '/scripts/app.js',
  output: {
    path:  __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
    }),
  ]
}

Template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>fun app</title>
  </head>
  <body>
    <p>does it matter?</p>
  </body>
</html>
picture GaryB432
👍15

Most helpful comment

Looks like that fixes it @jantimon 👍

Previously:

› cat package.json|grep html-webpack
    "html-webpack-plugin": "^4.5.0",

› node --trace-deprecation node_modules/webpack/bin/webpack.js

(node:62474) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
    at /Users/dan/coding/test-project/node_modules/html-webpack-plugin/index.js:280:49
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
assets by path ../ 28.4 KiB
  assets by path ../admin/ 3.63 KiB
    assets by path ../admin/preview-templates/*.js 883 bytes 2 assets
    2 assets
  assets by path ../*.png 9.67 KiB 3 assets
  asset ../favicon.ico 15 KiB [compared for emit] [copied]
  asset ../../src/_includes/layouts/webpack.njk 61 bytes [compared for emit]
assets by path images/*.png 223 KiB
  asset images/eleventy-js-starter-boilerplate.png 218 KiB [compared for emit] [copied]
  asset images/logo.png 3.28 KiB [compared for emit] [copied]
  asset images/logo-32x32.png 1.98 KiB [compared for emit] [copied]
assets by chunk 2.3 MiB (name: main)
  asset styles/main.css 2.29 MiB [compared for emit] (name: main)
  asset main.js 2.93 KiB [emitted] (name: main)
Entrypoint main 2.3 MiB = styles/main.css 2.29 MiB main.js 2.93 KiB
runtime modules 274 bytes 1 module
./src/assets/styles/main.css 50 bytes [built] [code generated]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/assets/styles/main.css 2.29 MiB [code generated]
webpack 5.1.1 compiled successfully in 2362 ms

Then updated with yarn add --dev [email protected]

› cat package.json|grep html-webpack                          
    "html-webpack-plugin": "5.0.0-alpha.3",

Result now:

› node --trace-deprecation node_modules/webpack/bin/webpack.js

assets by path ../ 28.4 KiB
  assets by path ../admin/ 3.63 KiB
    assets by path ../admin/preview-templates/*.js 883 bytes 2 assets
    2 assets
  assets by path ../*.png 9.67 KiB 3 assets
  asset ../favicon.ico 15 KiB [compared for emit] [copied]
  asset ../../src/_includes/layouts/webpack.njk 61 bytes [compared for emit]
assets by path images/*.png 223 KiB
  asset images/eleventy-js-starter-boilerplate.png 218 KiB [compared for emit] [copied]
  asset images/logo.png 3.28 KiB [compared for emit] [copied]
  asset images/logo-32x32.png 1.98 KiB [compared for emit] [copied]
assets by chunk 2.3 MiB (name: main)
  asset styles/main.css 2.29 MiB [compared for emit] (name: main)
  asset main.js 2.93 KiB [compared for emit] (name: main)
Entrypoint main 2.3 MiB = styles/main.css 2.29 MiB main.js 2.93 KiB
runtime modules 274 bytes 1 module
./src/assets/styles/main.css 50 bytes [built] [code generated]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/assets/styles/main.css 2.29 MiB [code generated]
webpack 5.1.1 compiled successfully in 2653 ms
picture dan2k3k4 on 16 Oct 2020
👍12 🎉8 ❤7

All 21 comments

Can you please check if 4.4.0 works for you?

jantimon picture jantimon on 30 Aug 2020

@jantimon I've tested 4.4.1 (with [email protected] and [email protected]), and most deprecation warnings are gone. There's one left:

node:22153) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
    at /home/avi/projects/sample-monorepo/node_modules/html-webpack-plugin/index.js:279:49
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

I ran webpack-cli directly with --trace-deprecation, so you can see it's being logged at line 278:

compilation.assets[finalOutputName] = {
              source: () => html,
              size: () => html.length
            };
AviVahl picture AviVahl on 30 Aug 2020
👀2 👍2

Changing the hook would be a breaking change I guess - I'll ask the webpack core team on guidance which stage to use:

https://webpack.js.org/api/compilation-hooks/#processassets

I am not sure if this might cause issues with chunk hashes (as they are not known at this time)

jantimon picture jantimon on 31 Aug 2020
👍3

@jantimon FYI, having the same issue exactly with 4.4.1 + [email protected].

nickbouton picture nickbouton on 1 Sep 2020
👍6

Here's some guidance that looks applicable: https://github.com/webpack/webpack/issues/11425

rockwalrus picture rockwalrus on 12 Sep 2020

what's progress of this issue?

tianyingchun picture tianyingchun on 12 Sep 2020

having the same issue exactly with 4.4.1 + [email protected]

tianyingchun picture tianyingchun on 12 Sep 2020

Same issue with v4.4.1 and [email protected]

jungleBadger picture jungleBadger on 12 Sep 2020

In the meantime, for me using v.4.4.1 and webpack v5.0.0-beta.24 is the right combo. yes build is compiling with warnings but it doesn't get stuck at BREAKING CHANGE warning

zanfirandra picture zanfirandra on 15 Sep 2020

what progress about the compatibility of webpack@5, webpack@5 have been released 2020-10-10
There are lots of plugins based on html-webpack-plugin. 👍

tianyingchun picture tianyingchun on 11 Oct 2020
👍18

webpack 5.0.0, html-webpack-plugin 4.5.0:

(node:48813) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
    Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
    Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
    at .yarn/$$virtual/html-webpack-plugin-virtual-facb2006ea/0/cache/html-webpack-plugin-npm-4.5.0-a74a71941d-df4dd38bd8.zip/node_modules/html-webpack-plugin/index.js:280:49
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
507 assets
3672 modules
0rvar picture 0rvar on 13 Oct 2020
👍26

Can you please see if this is fixed with [email protected] ?
Please see also #1527

jantimon picture jantimon on 16 Oct 2020

I'm still seeing it after updating to 5.0.0-alpha.2

(node:4366) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
    at Compilation.emitAsset (/node_modules/webpack/lib/Compilation.js:2818:21)
    at /node_modules/html-webpack-plugin/index.js:328:23
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
mrolla picture mrolla on 16 Oct 2020
👍3

yeah, it still has this issue event if update to 5.0.0-alpha.2

tianyingchun picture tianyingchun on 16 Oct 2020

Sorry I missed some parts in the last release can you please try once again with [email protected]

jantimon picture jantimon on 16 Oct 2020
👍8 ❤4

Looks like that fixes it @jantimon 👍

Previously:

› cat package.json|grep html-webpack
    "html-webpack-plugin": "^4.5.0",

› node --trace-deprecation node_modules/webpack/bin/webpack.js

(node:62474) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
    at /Users/dan/coding/test-project/node_modules/html-webpack-plugin/index.js:280:49
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
assets by path ../ 28.4 KiB
  assets by path ../admin/ 3.63 KiB
    assets by path ../admin/preview-templates/*.js 883 bytes 2 assets
    2 assets
  assets by path ../*.png 9.67 KiB 3 assets
  asset ../favicon.ico 15 KiB [compared for emit] [copied]
  asset ../../src/_includes/layouts/webpack.njk 61 bytes [compared for emit]
assets by path images/*.png 223 KiB
  asset images/eleventy-js-starter-boilerplate.png 218 KiB [compared for emit] [copied]
  asset images/logo.png 3.28 KiB [compared for emit] [copied]
  asset images/logo-32x32.png 1.98 KiB [compared for emit] [copied]
assets by chunk 2.3 MiB (name: main)
  asset styles/main.css 2.29 MiB [compared for emit] (name: main)
  asset main.js 2.93 KiB [emitted] (name: main)
Entrypoint main 2.3 MiB = styles/main.css 2.29 MiB main.js 2.93 KiB
runtime modules 274 bytes 1 module
./src/assets/styles/main.css 50 bytes [built] [code generated]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/assets/styles/main.css 2.29 MiB [code generated]
webpack 5.1.1 compiled successfully in 2362 ms

Then updated with yarn add --dev [email protected]

› cat package.json|grep html-webpack                          
    "html-webpack-plugin": "5.0.0-alpha.3",

Result now:

› node --trace-deprecation node_modules/webpack/bin/webpack.js

assets by path ../ 28.4 KiB
  assets by path ../admin/ 3.63 KiB
    assets by path ../admin/preview-templates/*.js 883 bytes 2 assets
    2 assets
  assets by path ../*.png 9.67 KiB 3 assets
  asset ../favicon.ico 15 KiB [compared for emit] [copied]
  asset ../../src/_includes/layouts/webpack.njk 61 bytes [compared for emit]
assets by path images/*.png 223 KiB
  asset images/eleventy-js-starter-boilerplate.png 218 KiB [compared for emit] [copied]
  asset images/logo.png 3.28 KiB [compared for emit] [copied]
  asset images/logo-32x32.png 1.98 KiB [compared for emit] [copied]
assets by chunk 2.3 MiB (name: main)
  asset styles/main.css 2.29 MiB [compared for emit] (name: main)
  asset main.js 2.93 KiB [compared for emit] (name: main)
Entrypoint main 2.3 MiB = styles/main.css 2.29 MiB main.js 2.93 KiB
runtime modules 274 bytes 1 module
./src/assets/styles/main.css 50 bytes [built] [code generated]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/assets/styles/main.css 2.29 MiB [code generated]
webpack 5.1.1 compiled successfully in 2653 ms
dan2k3k4 picture dan2k3k4 on 16 Oct 2020
👍12 🎉8 ❤7

Thanks for testing 👍

jantimon picture jantimon on 16 Oct 2020

I also have the same problem, provide reference.

Environment：package.json file
"webpack": "^5.3.0",
"html-webpack-plugin": "^5.4.0",

`

3% setup watch run HappyPluginHappy[babel]: Version: 5.0.1. Threads: 8 (shared pool)
Happy[babel]: All set; signaling webpack to proceed.
95% emitting emit(node:31112) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
Build completed in 9.83s
`

Then updated with "npm i -D [email protected]"

Result now:
`

3% setup watch run HappyPluginHappy[babel]: Version: 5.0.1. Threads: 8 (shared pool)
Happy[babel]: All set; signaling webpack to proceed.
Build completed in 8.649s
`

Doubt：
The problem is resolved, but the HTML-Webpack-plugin: ^5.4.0 will the same be true for the version after .

532604872 picture 532604872 on 30 Oct 2020

There is no version 5.4.0 by now.. But you are right we won't fix it for the 4.x branch

jantimon picture jantimon on 30 Oct 2020

Any updates on this fix/release going stable?

rnnyrk picture rnnyrk on 15 Dec 2020

@rnnyrk the tests are green again and there is only one last topic in https://github.com/jantimon/html-webpack-plugin/issues/1527 to be solved - after that I expect no further breaking changes and would release a beta version..

if there won't be any bugs reported with that release I'll release it as a stable version

I hope that's fine

jantimon picture jantimon on 15 Dec 2020
👍8
Was this page helpful?
0 / 5 - 0 ratings

Related issues

ghaiklor picture ghaiklor  ·  3Comments
hp8wvvvgnj6asjm7 picture hp8wvvvgnj6asjm7  ·  3Comments
azat-io picture azat-io  ·  4Comments
GerkinDev picture GerkinDev  ·  3Comments
klinki picture klinki  ·  3Comments