Webpack 5 support? about webpack-livereload-plugin

[KiraSmith-Dev]

Since most of the code that broke isn't 100% essential for basic usage, I've created a fork that is functional with webpack 5.

The major differences are:

• The appendScriptTag option is broken
• The only checks for reloading are "this.isRunning" and "(hash !== this.lastHash)"
• this.server.notifyClients() is only passed [''] instead of the "include" variable
• (Edit) Most likely some other options are broken too, but I don't have the time to test each one

For anyone who needs just the basic function while a real fix is made, you can find the fork here:
https://github.com/int3nse-git/webpack-livereload-plugin

[smadrom]

I haven't tried it.

Could you give it a test run @midnightcoder-pro and let me know what happens?

• [email protected]
• [email protected]

9% setup compilation LiveReloadPlugin[webpack-cli] Promise rejection: Error: MainTemplate.hooks.startup has been removed (use RuntimeGlobals.startup instead)
[webpack-cli] Error: MainTemplate.hooks.startup has been removed (use RuntimeGlobals.startup instead)
    at Object.tap (/home/pavel/phprojects/omnew/src/node_modules/webpack/lib/MainTemplate.js:100:12)
    at LiveReloadPlugin.applyCompilation (/home/pavel/phprojects/omnew/src/node_modules/webpack-livereload-plugin/index.js:164:42)
    at Hook.eval [as call] (eval at create (/home/pavel/phprojects/omnew/src/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:206:1)
    at Hook.CALL_DELEGATE [as _call] (/home/pavel/phprojects/omnew/src/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/home/pavel/phprojects/omnew/src/node_modules/webpack/lib/Compiler.js:916:26)
    at /home/pavel/phprojects/omnew/src/node_modules/webpack/lib/Compiler.js:957:29
    at Hook.eval [as callAsync] (eval at create (/home/pavel/phprojects/omnew/src/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/pavel/phprojects/omnew/src/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/home/pavel/phprojects/omnew/src/node_modules/webpack/lib/Compiler.js:952:28)
    at /home/pavel/phprojects/omnew/src/node_modules/webpack/lib/Compiler.js:453:12

[nypinstripes]

I'm a little confused, is a fix for webpack-livereload-plugin for webpack-5 still being worked on? It is the last blocking dep my project has, we use the append script option.

[TiTnOuK]

@nypinstripes check this fork, it's works with append script option :
github : https://github.com/Kooneko/livereload-webpack-plugin
npm : https://www.npmjs.com/package/@kooneko/livereload-webpack-plugin

[pataar]

It can be imported from webpack.
See: https://github.com/webpack-contrib/mini-css-extract-plugin/blob/e8a2d5a09ded967e0f4be145f1f52c1e5f7f6df1/src/CssLoadingRuntimeModule.js

I could fix this if you'd like. @statianzo, do you think a new major would be needed?

[antonioribeiro]

@TiTnOuK , I'm having the exact same error with your package installed.

[web-mi]

Hey,
i'm currenlty only working on project where i use hmr.
So haven't tried to upgrade on webpack 5 sorry.
Maybe i will try to upgrade another project if nobody is working on it

[statianzo]

It can be imported from webpack.
See: https://github.com/webpack-contrib/mini-css-extract-plugin/blob/e8a2d5a09ded967e0f4be145f1f52c1e5f7f6df1/src/CssLoadingRuntimeModule.js

I could fix this if you'd like. @statianzo, do you think a new major would be needed?

If it’s a matter of just conditionally using that property off the webpack package, then a minor would be fine. If the shape of the compilation given to the hook differs and requires implementation changes, then a major bump makes sense.

[pataar]

It's a bit harder than I thought. The documentation of RuntimeGlobals is scarce. Perhaps we could use an other hook than startup?

[statianzo]

I haven't tried it.

Could you give it a test run @midnightcoder-pro and let me know what happens?

[statianzo]

Thanks for testing @smadrom! Looks like some work will be needed here:

webpack-livereload-plugin/index.js

Lines 163 to 165 in 6859045

	LiveReloadPlugin.prototype.applyCompilation = function applyCompilation(compilation) {
	compilation.mainTemplate.hooks.startup.tap('LiveReloadPlugin', this.scriptTag.bind(this));
	};

Not sure where RuntimeGlobals is available.

[jraoult]

@pataar not really documentation but this might help: https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/9d30b6a8e7f800fe4516865987977fc30d8114fb/lib/index.js#L231. I think they are essentially trying to do the same thing and it works for WP 5.

EDIT:

  normalModuleFactory.hooks.afterResolve.tap(
              this.constructor.name,
              // Add react-refresh loader to process files that matches specified criteria
              (resolveData) => {
                injectRefreshLoader(resolveData.createData, matchObject);
              }
            );

Ignore me if I'm totally off-topic. This is the first time I'm trying to read a WP plugin code.

[nypinstripes]

@statianzo @web-mi Hey, just checking this is on the radar, kind of in a holding pattern but don't want to let the webpack framework upgrades get too far away from us.

[nypinstripes]

ping

[nypinstripes]

thank you much @web-mi