Plugin not working with webpack-dev-server

[roryabraham]

Environment and package version

webpack: 5.75.0 html-webpack-plugin: 5.5.0 html-inline-script-webpack-plugin: 3.1.0

Reproduction link / code sample

Coming from https://github.com/Expensify/App. Sorry it's not a minimal example but the webpack config is right here.

Steps to reproduce

1. npm i
2. npm run web
3. Look at the html file in the resultant web build – see that there's no

What is expected?

The specified script should be inlined in the html.

What is actually happening?

It is just showing up as a normal script tag w/ defer

[roryabraham]

I've done some debugging and found:

• This line is being executed
• If you add a log line here, you'll find a tap added to hooks.alterAssetTags.taps
• If you add a log in HTMLWebpackPlugin here, you'll see that getHtmlWebpackPluginHooks(compilation).alterAssetTags.taps is an empty array
• As such this code is never executed

[roryabraham]

Currently my best working theory for the problem is that this plugin hooks into compiler.hooks.compilation.tap, while HTMLWebpackPlugin hooks into processAssets during the PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE stage: https://github.com/jantimon/html-webpack-plugin/blob/main/index.js#L215-L223

[roryabraham]

Edit: After a lot of trial and error I discovered that this is working fine for real webpack builds, just not webpack-dev-server

[icelam]

@roryabraham Thanks for reporting this issue.

To be honest, I wasn't expecting this plugin to be used under a development environment (with a webpack dev server) as it was originally designed for easy sharing and delivery of build files, so I didn't really tested the compatibility of this plugin with webpack dev server. (As supporting webpack dev server would usually means supporting hot reload and might makes things trickier.)

I will need to wait till the weekend to be free to study the sample repository you shared and probably deep dive on how HMR works. However I managed to created a small sample on one of my old repository to test the behaviour of this plugin. I hope this can give some insight on what's the root cause behind.

Sample code can be found below, please run yarn && yarn start or npm install && npm run start to preview the changes. (Sorry, the app is small and simple and might not be enough to test the edge cases for hot reload, but we can see the scripts are properly inlined in to the HTML file even on dev server). https://github.com/icelam/error-document/commit/71f3cb0de2131bbe8a5ad5bc4688466111464254

[icelam]

@roryabraham A quick updates on my findings here.

As you mentioned that the plugin works on production build, I have been focusing on finding differences in config/webpack/webpack.dev.js. I noticed that after I commented out the speed-measure-webpack-plugin, splash.js is properly inlined into index.html.

- return speedMeasure.wrap(config);
+ return config;

For hot reload to work properly, I also have to add the following lines into config/webpack/webpack.common.js:

const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
+   optimization: {
+       runtimeChunk: 'single'
+   }

This makes sure you only have a single runtime (with module cache) and modules are not instantiated twice when using multiple entry points on a single page.

I will try to take a look at the source code of speed-measure-webpack-plugin next week to see if it is something that this plugin should support, as I see similar issues reported to speed-measure-webpack-plugin not supporting webpack 5 and also hooks not running after applying speed-measure-webpack-plugin or incompatible with other plugins, so it might be something that should be filed to them instead. Meanwhile, you may consider switching off speed-measure-webpack-plugin if it is not critical. Another workaround to try would be https://github.com/stephencookdev/speed-measure-webpack-plugin/issues/167#issuecomment-976836861.

[roryabraham]

Wow, thanks so much @icelam for spending time investigating this issue for us. I tried some of the workarounds listed in https://github.com/stephencookdev/speed-measure-webpack-plugin/issues/167, but unfortunately couldn't get any of them to work.

If you're interested in spending more time on this issue, I created an issue here with an associated bug bounty, so you can get some 🤑 for your time. Thanks.