icelam/html-inline-script-webpack-plugin

Infinite reload when using HMR

Closed this issue · 3 comments

dandgerson commented

Hey, thanks for the plugin.

In my case i need inserted script tag with inlined assets in the bottom of the tag.

Environment and package version

"html-inline-script-webpack-plugin": "^3.2.0",
"html-webpack-plugin": "^5.5.3",

Reproduction link / code sample

N/A

Steps to reproduce

plugins: [
        new HtmlWebpackPlugin({
          template: path.resolve(__dirname, "public", "index.html"),
        }),
        new HtmlInlineScriptPlugin(),
      ],

What is expected?

I need to inlined assets being in the bottom of the body tag like in solution below

Now i use this hardcoded solution, and has HMR issue with infinite reloaded if i trigger HMR with applying changes in source code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React + Webpack</title>
  </head>
  <body>
    <div id="root"></div>

    <script defer="defer">
      <% /*
      The following line is a workaround for scripts that insert .js code into the generated .html file.
      Because this is set here, "inject: false" is set in webpack-config.js in plugins.HtmlWebpackPlugin
      */ %>
      <%= compilation.assets[webpackConfig.output.filename].source() %>
    </script>
  </body>
</html>
plugins: [
        new HtmlWebpackPlugin({
          template: path.resolve(__dirname, "public", "index.html"),
          // this is a workaround for the injection of the code from the output file into the .html
          // the injection will be handled in the template file
          inject: false,
        }),
      ],

What is actually happening?

RESULT

icelam commented

Hello @dandgerson,

Thanks for reaching out. I'm sorry to hear that you're experiencing an infinite reload issue when using the HtmlInlineScriptPlugin with the local dev server.

I couldn't give much insight into this issue without seeing the complete webpack configuration, but I would recommend avoiding using this plugin along with the local dev server, as it was not designed for this use case.

The HtmlInlineScriptPlugin is designed to generate build assets where script content are embed into HTML files for deployment to environments where you can only upload a single file, or where the script file itself is small that it doesn't worth sending an extra HTTP call. When used with the local dev server, webpack will insert extra runtime scripts to support hot replace into the entry script. When the entry script is being processed to insert inline inside HTML file, HMR runtime also got replaced, which I believe is the reason of causing the infinite reload issue.

If there is a strong reason for embedding script content into HTML under local dev environment, I suggest you can try tinkering with webpack chunk optimization together with filtering options of HtmlInlineScriptPlugin to make sure HMR code isn't inlined. If that doesn't help, I can try tinkering with webpack and see if there's anything I can do in this regard.

Let me know if you have any questions.

  • ❤️1
JWHorner commented

I think this response is for a different issue?

I am having the same issue where I need the script inline-injected below the <body> so that document.body is not null in the script.

I have used dandgerson's workaround and it's good, but an option to inject inline into the body instead of the head would be a nice addition.

Thanks for maintaining this plugin.

icelam commented

@JWHorner, I recommend checking out how to customize html-webpack-plugin for your needs. You might find this previously closed issue helpful, as it addresses a similar concern: #352 (comment)

I am closing this issue for housekeeping, as your comment addresses a different question from the original one and it has been stale for a while. If the above does not resolve your issue, please feel free to open a new one.