Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Can't get HMR to work #99

Closed
yuenaffiliates opened this issue Jul 12, 2024 · 2 comments
Closed

Can't get HMR to work #99

yuenaffiliates opened this issue Jul 12, 2024 · 2 comments

Comments

@yuenaffiliates
Copy link

yuenaffiliates commented Jul 12, 2024 •
edited
Loading

Current behaviour

After saving a change to index.html, the page flashes as if reloading, but the content has not changed.

Expected behaviour

Content changes are reloaded.

Reproduction Example

webpack.config.js

const path = require('path');
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = (env) => {
  return {
    target: 'web',
    mode: env.production ? 'production' : 'development',
    output: {
      path: path.resolve(__dirname, 'dist'),
      clean: true,
    },
    plugins: [
      new HtmlBundlerPlugin({
        entry: {
          index: './www/index.html',
        },
      }),
    ],

    // Enable HMR with live reload
    devServer: {
      static: path.resolve(__dirname, 'dist'),
      watchFiles: {
        paths: ['www/**/*'],
        options: {
          usePolling: true,
        },
      },
    },
  };
};

www/index.html

<!DOCTYPE html>

<html lang="en">
  <head> </head>

  <body>
    <h1>Test Title</h1>
    <script src="js/scripts.js"></script>
  </body>
</html>

www/js/scripts.js

console.log('Test');
  1. Run webpack serve
  2. Change the "Test Title" in index.html or in the script console log and save
  3. Observe that the page reloaded but content and console log is the same

Environment

  • OS: [macOS, Linux, Windows] Running vscode nodejs developer container on Windows
  • version of Node.js: v20.13.1
  • version of Webpack: 5.92.1
  • version of the Plugin: 3.15.0

Additional context

Logs from webpack serve and after modifying the file and saving:

> webpack serve --progress

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/workspaces/scraper/dist' directory
asset scripts.js 258 KiB [emitted] (name: scripts)
asset index.html 147 bytes [emitted] (name: __bundler-plugin-entry__index)
runtime modules 52.5 KiB 22 modules
modules by path ./node_modules/ 172 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 69.7 KiB 16 modules
  modules by path ./node_modules/webpack/hot/*.js 5.18 KiB
    ./node_modules/webpack/hot/dev-server.js 1.94 KiB [built] [code generated]
    + 3 modules
  modules by path ./node_modules/html-entities/lib/*.js 78.9 KiB
    ./node_modules/html-entities/lib/index.js 4.84 KiB [built] [code generated]
    ./node_modules/html-entities/lib/named-references.js 73.1 KiB [built] [code generated]
    + 2 modules
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./node_modules/events/events.js 14.5 KiB [built] [code generated]
modules by path ./www/ 242 bytes
  ./www/index.html 221 bytes [built] [code generated]
  ./www/js/scripts.js 21 bytes [built] [code generated]
 HTML Bundler Plugin  ▶▶▶ (webpack 5.92.1) compiled successfully in 1052 ms
@yuenaffiliates
Copy link
Author

Looking around seems this is more of a docker file change detection problem. Trying out facebook/create-react-app#11879 (comment) worked for me by adding:

    watchOptions: {
      aggregateTimeout: 200,
      poll: 1000,
      ignored: '**/node_modules',
    },

@webdiscus
Copy link
Owner

@yuenaffiliates

LiveReload after changes works properly.

You can try the live demo on stackblitz.
For example, change the src/main.js file, e.g. add alert('Hello!'); into JS file and you will see result immediately.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@webdiscus @yuenaffiliates