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

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
webpack@5.0.0-beta.28
html-webpack-plugin@4.3.0

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>

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 16
  • Comments: 22 (8 by maintainers)

Commits related to this issue

Most upvoted comments

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 html-webpack-plugin@5.0.0-alpha.3

› 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

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

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. 👍

Sorry I missed some parts in the last release can you please try once again with html-webpack-plugin@5.0.0-alpha.3

@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 FYI, having the same issue exactly with 4.4.1 + webpack@5.0.0-beta.29.

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)

@jantimon I’ve tested 4.4.1 (with webpack@5.0.0-beta.29 and webpack-cli@4.0.0-beta.8), 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
            };

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)