Closed asterikx closed 3 years ago
What version of Webpack are you running? The deprecations seems like they are from Webpack 5 while running the Webpack 4 code.
Are you hoisting Webpack inside a monorepo with multiple versions? Can you try forcing Gatsby to use 0.5.0-rc.0
via resolutions (there are numerous fixes for monorepo compat in 0.5.0
)?
Thanks @pmmmwh.
Yes, I have a monorepo with multiple versions of Webpack installed. Here's the output from yarn list webpack
:
├─ @my-project/shared-ui@0.1.0
│ └─ webpack@5.38.1
├─ gatsby@3.6.2
│ └─ webpack@5.38.1
├─ react-scripts@4.0.3
│ └─ webpack@4.44.2
└─ webpack@4.46.0
How can I force Gatsby to use 0.5.0-rc.0
? In the package.json
of my Gatsby project, I specified "@pmmmwh/react-refresh-webpack-plugin": "0.5.0-rc.0"
as a development dependency, but the error remains.
I guess you might have to do it in root since CRA also depends on a copy of this plugin ...
Lots of issues when updating to Gatsby 3 in a monorepo. By setting up a new Gatsby and adding step by step the original modules I found out the issue comes from the react-refresh-webpack-plugin.
This is one of the errors besides the deprecated warnings:
I add this plugin in the root package.json in resolutions (0.5.0-rc.0) and the build was working.
However, now the page creates JS errors from that plugin:
commons.js:12016 Uncaught TypeError: Cannot read property 'useCustomOverlay' of undefined
at Module.initWHMEventSource (WHMEventSource.js:16)
at setupOverlay (ErrorOverlayEntry.js:79)
at runWithPatchedUrl (patchUrl.js:31)
at eval (ErrorOverlayEntry.js:75)
at Module.../../node_modules/gatsby/node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js (commons.js:10358)
at Module.options.factory (commons.js:12648)
at __webpack_require__ (commons.js:12013)
at commons.js:13364
at Function.__webpack_require__.O (commons.js:12069)
at commons.js:13366
Any ideas how to fix that?
this was a temp fix in WHMEventSource @pmmmwh
const client = window[singletonKey];
if (!client) {
console.info("CLIENT MISSING");
return
}
Hi, please report to Gatsby instead of this plugin. They should have properly injected the WHM client instead of relying on us to provide a fallback, which in most cases are problematic.
I'll fix the case where it is crashing and output a warning instead.
Thanks @pmmmwh , much appreciated!
@pmmmwh unfortunately it stopped working again. I now tried to pin the version via the resolutions field in my root package.json
as you suggested:
"workspaces": {
"nohoist": [
"**/@storybook/**/webpack",
"**/@storybook/**/webpack/**"
],
"packages": [
"packages/*"
]
},
"resolutions": {
"@pmmmwh/react-refresh-webpack-plugin": "0.5.0-rc.0"
},
My page stays blank and the browser console shows the following error (the node console shows no errors):
commons.js:7477 Uncaught TypeError: Cannot read property 'useCustomOverlay' of undefined
at Module.initWHMEventSource (WHMEventSource.js:16)
at setupOverlay (ErrorOverlayEntry.js:79)
at runWithPatchedUrl (patchUrl.js:31)
at eval (ErrorOverlayEntry.js:75)
at Module.../../node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js (commons.js:2098)
at Module.options.factory (commons.js:8117)
at __webpack_require__ (commons.js:7474)
at commons.js:8833
at Function.__webpack_require__.O (commons.js:7523)
at commons.js:8835
Do you have any idea?
How can I find out which version of webpack is run by Gatbsy? Is it possible to print the version from within the gatsby-node.js
file?
Output from yarn list webpack
:
├─ @storybook/builder-webpack4@6.3.2
│ └─ webpack@4.46.0
├─ @storybook/core-common@6.3.2
│ └─ webpack@4.46.0
├─ @storybook/core-server@6.3.2
│ └─ webpack@4.46.0
├─ @storybook/manager-webpack4@6.3.2
│ └─ webpack@4.46.0
├─ @storybook/react@6.3.2
│ └─ webpack@4.46.0
└─ gatsby@3.8.1
└─ webpack@5.41.1
there is webpack@5.41.1
ending up in my root node_modules
folder.
_EDIT: Gatsby is running version 5.41.1
of Webpack (I added some logging statements to node_modules/webpack/lib/index.js
to find out)_
Here is the diff that solved my problem, but I'm not sure what the implications are:
diff --git a/node_modules/@pmmmwh/react-refresh-webpack-plugin/sockets/WHMEventSource.js b/node_modules/@pmmmwh/react-refresh-webpack-plugin/sockets/WHMEventSource.js
index 8eb0789..902d813 100644
--- a/node_modules/@pmmmwh/react-refresh-webpack-plugin/sockets/WHMEventSource.js
+++ b/node_modules/@pmmmwh/react-refresh-webpack-plugin/sockets/WHMEventSource.js
@@ -13,6 +13,10 @@ const singletonKey = '__webpack_hot_middleware_reporter__';
function initWHMEventSource(messageHandler) {
const client = window[singletonKey];
+ if (!client) {
+ return
+ }
+
client.useCustomOverlay({
showProblems: function showProblems(type, data) {
const error = {
This issue body was partially generated by patch-package.
Hey! Thanks for reporting this issue - I am actually fully aware of this and have reached out to the maintainers of Gatsby so we can collaboratively get this fixed there 😄
@pmmmwh Could you please post the URL of issue in Gatsby repo here, please? To read more details about it.
I'm also facing this problem with useCustomOverlay when using @pmmmwh/react-refresh-webpack-plugin v0.5.0-rc.0
We are talking about this privately at the moment, but when there is something to share I'll update here.
I'm also going to output a warning instead of making the socket throw so at least the build would work but the overlay would probably not work as expected.
In my case, hot reloading (a page with SSR) also doesn't seem to work:
Is it the same issue or a different one?
Is it the same issue or a different one?
Please report to Gatsby.
Hi - in the next RC the plugin will no-longer crash, but I believe HMR will also not work as Gatsby was dependent on this plugin to inject the HMR client which is no-longer the case in 0.5.0.
This will be up to Gatsby to fix.
Running
gatsby develop
fails with deprecations warnings traced toreact-refresh-webpack-plugin
(traced usingnode --trace-deprecation ./node_modules/gatsby/dist/bin/gatsby develop
).Error messages:
Output from
gatsby info
: