pmmmwh / react-refresh-webpack-plugin

A Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components.
MIT License
3.15k stars 194 forks source link

Deprecation warnings failing Gatsby development server to start #422

Closed asterikx closed 3 years ago

asterikx commented 3 years ago

Running gatsby develop fails with deprecations warnings traced to react-refresh-webpack-plugin (traced using node --trace-deprecation ./node_modules/gatsby/dist/bin/gatsby develop).

Error messages:

success Caching HTML renderer compilation - 0.006s

 ERROR 

(node:8481) [DEP_WEBPACK_MAIN_TEMPLATE_OUTPUT_OPTIONS] DeprecationWarning:
MainTemplate.outputOptions is deprecated (use Compilation.outputOptions instead)
    at /Users/me/project-root/web/node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/i
ndex.js:134:60
    at Hook.eval (eval at create (/Users/me/project-root/web/node_modules/gatsby/node_mod
ules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:104:1)
    at Hook.CALL_DELEGATE [as _call]
(/Users/me/project-root/web/node_modules/gatsby/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users/me/project-root/web/node_modules/gatsby/node_modul
es/webpack/lib/Compiler.js:1034:26)
    at /Users/me/project-root/web/node_modules/gatsby/node_modules/webpack/lib/Compiler.j
s:1076:29
    at Hook.eval [as callAsync] (eval at create (/Users/me/project-root/web/node_modules/
gatsby/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync]
(/Users/me/project-root/web/node_modules/gatsby/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/Users/me/project-root/web/node_modules/gatsby/node_modules/webp
ack/lib/Compiler.js:1071:28)
    at /Users/me/project-root/web/node_modules/gatsby/node_modules/webpack/lib/Watching.j
s:188:19
    at _next1 (eval at create (/Users/me/project-root/web/node_modules/gatsby/node_module
s/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at eval (eval at create (/Users/me/project-root/web/node_modules/gatsby/node_modules/
tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

 ERROR 

(node:8481) [DEP_WEBPACK_MAIN_TEMPLATE_REQUIRE] DeprecationWarning: MainTemplate.hooks.require
 is deprecated (use JavascriptModulesPlugin.getCompilationHooks().renderRequire instead)
    at /Users/me/project-root/web/node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/i
ndex.js:135:52
    at Hook.eval (eval at create (/Users/me/project-root/web/node_modules/gatsby/node_mod
ules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:104:1)
    at Hook.CALL_DELEGATE [as _call]
(/Users/me/project-root/web/node_modules/gatsby/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users/me/project-root/web/node_modules/gatsby/node_modul
es/webpack/lib/Compiler.js:1034:26)
    at /Users/me/project-root/web/node_modules/gatsby/node_modules/webpack/lib/Compiler.j
s:1076:29
    at Hook.eval [as callAsync] (eval at create (/Users/me/project-root/web/node_modules/
gatsby/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync]
(/Users/me/project-root/web/node_modules/gatsby/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/Users/me/project-root/web/node_modules/gatsby/node_modules/webp
ack/lib/Compiler.js:1071:28)
    at /Users/me/project-root/web/node_modules/gatsby/node_modules/webpack/lib/Watching.j
s:188:19
    at _next1 (eval at create (/Users/me/project-root/web/node_modules/gatsby/node_module
s/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at eval (eval at create (/Users/me/project-root/web/node_modules/gatsby/node_modules/
tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

 ERROR 

(node:8481) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning:
Compilation.hooks.normalModuleLoader was moved to
NormalModule.getCompilationHooks(compilation).loader
    at getNormalModuleLoader (/Users/me/project-root/web/node_modules/gatsby/node_modules
/webpack/lib/Compilation.js:383:39)
    at Object.get normalModuleLoader [as normalModuleLoader] (/Users/me/project-root/web/
node_modules/gatsby/node_modules/webpack/lib/Compilation.js:816:12)
    at /Users/me/project-root/web/node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/i
ndex.js:212:31
    at Hook.eval (eval at create (/Users/me/project-root/web/node_modules/gatsby/node_mod
ules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:104:1)
    at Hook.CALL_DELEGATE [as _call]
(/Users/me/project-root/web/node_modules/gatsby/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users/me/project-root/web/node_modules/gatsby/node_modul
es/webpack/lib/Compiler.js:1034:26)
    at /Users/me/project-root/web/node_modules/gatsby/node_modules/webpack/lib/Compiler.j
s:1076:29
    at Hook.eval [as callAsync] (eval at create (/Users/me/project-root/web/node_modules/
gatsby/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync]
(/Users/me/project-root/web/node_modules/gatsby/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/Users/me/project-root/web/node_modules/gatsby/node_modules/webp
ack/lib/Compiler.js:1071:28)
    at /Users/me/project-root/web/node_modules/gatsby/node_modules/webpack/lib/Watching.j
s:188:19
    at _next1 (eval at create (/Users/me/project-root/web/node_modules/gatsby/node_module
s/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at eval (eval at create (/Users/me/project-root/web/node_modules/gatsby/node_modules/
tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

Output from gatsby info:

  System:
    OS: macOS 11.4
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.16.0 - ~/.nvm/versions/node/v14.17.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 91.0.4472.77
    Firefox: 86.0.1
    Safari: 14.1.1
pmmmwh commented 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)?

asterikx commented 3 years ago

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.

pmmmwh commented 3 years ago

I guess you might have to do it in root since CRA also depends on a copy of this plugin ...

Wendenburg commented 3 years ago

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:

Bildschirmfoto 2021-06-22 um 15 55 25

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?

Wendenburg commented 3 years ago

this was a temp fix in WHMEventSource @pmmmwh

  const client = window[singletonKey];

  if (!client) {
    console.info("CLIENT MISSING");
    return
  }
pmmmwh commented 3 years ago

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.

Wendenburg commented 3 years ago

Thanks @pmmmwh , much appreciated!

asterikx commented 3 years ago

@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)_

asterikx commented 3 years ago

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.

pmmmwh commented 3 years ago

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 😄

dko-slapdash commented 3 years ago

@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

pmmmwh commented 3 years ago

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.

dko-slapdash commented 3 years ago

In my case, hot reloading (a page with SSR) also doesn't seem to work:

  1. I change a local file,
  2. the WS delivers some message which looks like this: image image
  3. overlayError? graphql-compiler=null? nothing like that in "gatsby develop" terminal, the terminal is fully green
  4. the page is not auto-reloaded, and no hints are shown on it,
  5. pressing Cmd+R reloads the page and shows the changes

Is it the same issue or a different one?

pmmmwh commented 3 years ago

Is it the same issue or a different one?

Please report to Gatsby.

pmmmwh commented 3 years ago

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.