Html-webpack-plugin: Webpack v5.22.0` breaks HtmlWebpackLoader

[trullock]

See here, where webpack dont give a single sh*t: https://github.com/webpack/webpack/issues/12689

Bug report

Updating from 5.21.2 to 5.22.0 makes my build spit out the following errors for all my HtmlWebpackPlugins:

message: Error: The loader "<path>\\node_modules\\html-webpack-plugin\\li b\\loader.js!<path>\\src\\app\\app.html" didn't return html.\n+

Relevant webpack config

new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "src", "app", "app.html"),
            templateParameters: {
                pages
            },
            filename: 'app.html',
            scriptLoading: "defer",
            chunks: ['app']
        })

rest of stack trace:

      '  - index.js:336 HtmlWebpackPlugin.evaluateCompilationResult\n' +
      '    [Useroo]/[html-webpack-plugin]/index.js:336:24\n' +        
      '  \n' +
      '  - index.js:243 \n' +
      '    [Useroo]/[html-webpack-plugin]/index.js:243:22\n' +        
      '  \n' +
      '  - runMicrotasks\n' +
      '  \n' +
      '  - task_queues.js:93 processTicksAndRejections\n' +
      '    internal/process/task_queues.js:93:5\n' +
      '  \n' +
      '  - async Promise.all\n' +
      '  \n' +
      '  - async Promise.all\n' +
      '  \n'
  },

What is the expected behavior?

Not to explode, it doesn't in 5.21.2 but does in 5.22.0

Other relevant information:
webpack version: 5.22.0 (not 5.21.2)
Node.js version: 12, 14
Operating System: Windows, Linux

[alexander-akait]

First and last warning for sh*t. Respect other developers.

[alexander-akait]

For the future, I recommend you apply updates step by step, then it will be easier to determine where the problem came from

[trullock]

only updated webpack, from 5.21.2 to 5.22.0

[3cp]

UPDATE: false alarm. Upgrading html-webpack-plugin from 4.5.1 to 5.1.0 fixed the issue for us.

---

We confirm there is a breaking behaviour between webpack 5.21.2 and 5.22.0.
It manifested to a different error message for our setup.

Error: The loader "my-app/node_modules/html-webpack-plugin/lib/loader.js!/home/itghuc/my-app/index.ejs" didn't return html

Very basic usage for our setup.

new HtmlWebpackPlugin({ template: 'index.ejs' })

[alexander-akait]

@trullock Please create reproducible test repo

[alexander-akait]

https://github.com/webpack/webpack/issues/12687#issuecomment-779530228, please update html-webpack-plugin to v5, v4 is not fully compatibility with webpack v5

[trullock]

@trullock Please create reproducible test repo

Sure, I'll watch https://github.com/webpack/webpack/issues/12687#issuecomment-779530228 first and see what happens there.

I'll pursue updating html-webpack-plugin too

[jantimon]

@trullock does updating resolve the issue for you?

[ttttttssssss]

I have also encountered the above problems.
(What a bad day! I thought it was because of the environment.Because I deployed on Windows and developed on Mac)

There are two solutions:

1. update [email protected] -> @5.x.x
   > https://github.com/webpack/webpack/issues/12689
   > alexander-akait :You need to update html-webpack-plugin to v5, v4 is not fully compatibility with webpack v5

or

1. webpack use < @5.22.0

[mixalistzikas]

We have the same problem. We have webpack 5.21.2 but html-webpack-plugin is dependency from something else. And we can't find the dependency. If we use 2 days ago package-lock.json it works. If we do clean npm install it breaks

[alexander-akait]

@mixalistzikas npm ls html-webpack-plugin

[mixalistzikas]

UNMET OPTIONAL DEPENDENCY @storybook/[email protected]
-- UNMET OPTIONAL DEPENDENCY @storybook/[email protected] -- UNMET OPTIONAL DEPENDENCY [email protected]

[alexander-akait]

@mixalistzikas run npm i -D html-webpack-plugin, you have UNMET OPTIONAL DEPENDENCY, it is bad

[alexander-akait]

You forget to run npm i

[alexander-akait]

npm ls html-webpack-plugin should show html-webpack-plugin, if you don't see it you done something wrong

[mixalistzikas]

+-- @storybook/[email protected]
| `-- @storybook/[email protected]
|   `-- [email protected]
`-- [email protected]

[alexander-akait]

@mixalistzikas All works fine?

[mixalistzikas]

No, I still get errors

[alexander-akait]

As you can see the problem in script-webpack-plugin from @angular-devkit, nothing to fix here

[MartB]

@mixalistzikas just add the following into your project package.json and hope that its compatible^^

  "resolutions": {
    "html-webpack-plugin": "^5.1.0"
  }

[913453448]

you can do this

[zhangbowen-github]

Upgrading html-webpack-plugin from 4.5.1 to 5.1.0 fixed the issue for us. 😀👍

[takhello]

Really a dangerous update, sorry

[jantimon]

I released a fix as [email protected] - however I strongly recommend to use webpack 5 wit html-webpack-plugin@5

[trullock]

That's fantastic, thanks. I wasn't using v5 originally due to some other bug which is perhaps now fixed separately. 4.5.2 hopefully gets us out of this scrape and I'll come back if there's an issue with the current V5