Issues with Webpack 5

[K-Leon]

First of Thanks for this great plugin!

But i'm still struggeling getting it to work - i was experimenting with Webpack 5 and stumbled over this issue:

Error: NormalModuleFactory.afterResolve is no longer a waterfall hook, but a bailing hook instead. Do not return the passed object, but modify it instead. Returning false will ignore the request and results in no module created.

If you drop the return statement in the mentioned hook it will continue to compile, but there seems to be issues with detecting the react refresh plugin.

WARNING in React Refresh Plugin: The plugin is unable to detect transformed code from react-refresh. Did you forget to include "react-refresh/babel" in your list of Babel plugins? Note: you can disable this check by setting "disableRefreshCheck: true".

ERROR in [entry] [initial]
Cannot read property 'trimRight' of undefined

ERROR in [entry] [initial]
Cannot read property 'trimRight' of undefined

ERROR in [entry] [initial] polyfill.js
Cannot read property 'trimRight' of undefined

ERROR in [entry] [initial] app.js
Cannot read property 'trimRight' of undefined

[apostolos]

Hi @K-Leon, this plugin does not yet support webpack@5+

You can try your luck with https://github.com/WebHotelier/webpack-fast-refresh -- it closely follows changes to react-refresh-webpack-plugin but it is webpack@5+ compatible minus the overlay stuff and the babel plugin detection logic.

WARNING: We do not plan maintaining webpack-fast-refresh. After react-refresh-webpack-plugin adds support for webpack@5+, we will deprecate our fork.

[pmmmwh]

Error: NormalModuleFactory.afterResolve is no longer a waterfall hook, but a bailing hook instead.

This is on my radar, unfortunately I won't have time to fix this yet.

There seems to be issues with detecting the react refresh plugin.

This is a known issue #15
Are the other errors shown related to the plugin as well? I don't recall my use of trimRight anywhere.

[samcooke98]

I also got trimRight errors. I found that it was caused by createRefreshTemplate failing to find the string in the following line

react-refresh-webpack-plugin/src/helpers/createRefreshTemplate.js

Lines 47 to 49 in 5735809

	const moduleInitializationLineNumber = lines.findIndex((line) =>
	line.startsWith('modules[moduleId].call')
	);

find would then return -1, causing issues.

The following patch made things seem to work:

diff --git a/node_modules/@pmmmwh/react-refresh-webpack-plugin/src/helpers/createRefreshTemplate.js b/node_modules/@pmmmwh/react-refresh-webpack-plugin/src/helpers/createRefreshTemplate.js
index afd2562..43cf98e 100644
--- a/node_modules/@pmmmwh/react-refresh-webpack-plugin/src/helpers/createRefreshTemplate.js
+++ b/node_modules/@pmmmwh/react-refresh-webpack-plugin/src/helpers/createRefreshTemplate.js
@@ -48,6 +48,13 @@ function createRefreshTemplate(source) {
     line.startsWith('modules[moduleId].call')
   );

+  if(moduleInitializationLineNumber === -1) {
+    return source;
+  }
   return Template.asString([
     ...lines.slice(0, moduleInitializationLineNumber),
     beforeModule,
diff --git a/node_modules/@pmmmwh/react-refresh-webpack-plugin/src/index.js b/node_modules/@pmmmwh/react-refresh-webpack-plugin/src/index.js
index ea0bee7..5fae5f6 100644
--- a/node_modules/@pmmmwh/react-refresh-webpack-plugin/src/index.js
+++ b/node_modules/@pmmmwh/react-refresh-webpack-plugin/src/index.js
@@ -100,11 +100,11 @@ class ReactRefreshPlugin {
         ) {
           data.loaders.unshift({
             loader: require.resolve('./loader'),
-            options: undefined,
+            options: '',
           });
         }

-        return data;
+        // return data;
       });
     });