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

[ar7casper]

Description

Created a fresh and new project using gatsby V3.
running gatsby develop results in a build error.

Steps to reproduce

run npm init gatsby, run develop. fail

Expected result

Initial project should run

Actual result

Environment

System:
OS: macOS 11.2
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Shell: 5.8 - /bin/zsh
Binaries:
Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
Yarn: 1.22.1 - /usr/local/bin/yarn
npm: 6.14.9 - ~/.nvm/versions/node/v12.18.3/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 88.0.4324.192
Edge: 88.0.705.81
Firefox: 85.0.2
Safari: 14.0.3

[LekoArts]

Hi!

I have followed your reproduction steps but don't see this error. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

Thanks for using Gatsby! 💜

[ar7casper]

@LekoArts

Hi,

I honestly can't.
Just followed your instructions.
Seems like it originates from yoga-layout-prebuilt not playing well with webpack.

[cymkd]

Having the exact same issue.
yoga-layout-prebuilt is mentioned
tapable is mentioned.

verbose 73.371712375 Transition to "runningQueries" > "done"
verbose 73.402144708 Transition to "startingDevServers"
error (node:42211) [DEP_WEBPACK_MAIN_TEMPLATE_OUTPUT_OPTIONS] DeprecationWarning: MainTemplate.outputOptions is deprecated (use Compilation.outputOptions instead)
(Use node --trace-deprecation ... to show where the warning was created)
error (node:42211) [DEP_WEBPACK_MAIN_TEMPLATE_REQUIRE] DeprecationWarning: MainTemplate.hooks.require is deprecated (use JavascriptModulesPlugin.getCompilationHooks().renderRequire instead)
error (node:42211) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
/******/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

Error: NormalModuleFactory.afterResolve (ReactRefreshPlugin) 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.
    at /******/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:290:14
    at Hook.eval [as callAsync] (eval at create (/******/node_modules/gatsby/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/******/node_modules/gatsby/node_modules/tapable/lib/Hook.js:18:14)
    at /******/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:286:30
    at eval (eval at create (/******/node_modules/gatsby/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /******/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:536:7
    at /******/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:118:11
    at /******/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:568:8
    at NormalModuleFactory.resolveRequestArray (******/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:907:34)
    at /******/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:560:11
    at /******/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:118:11
    at /******/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:640:8
    at /******/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:778:5
    at finishResolved (/******/node_modules/gatsby/node_modules/enhanced-resolve/lib/Resolver.js:278:11)
    at /******/node_modules/gatsby/node_modules/enhanced-resolve/lib/Resolver.js:342:25
    at /******/node_modules/gatsby/node_modules/enhanced-resolve/lib/Resolver.js:409:24

large e-commerce project can't share a repo, ill try to make a new repo and slowly add plugins that we have:
"@netlify/zip-it-and-ship-it": "^2.5.0",
"@react-google-maps/api": "^2.1.1",
"algoliasearch": "^4.8.3",
"axios": ">=0.21.1",
"bignumber.js": "^9.0.0",
"dotenv": "^8.2.0",
"formik": "^2.1.3",
"gatsby": "^3.0.1",
"gatsby-image": "^3.0.0",
"gatsby-plugin-algolia": "^0.16.3",
"gatsby-plugin-breadcrumb": "^11.0.0",
"gatsby-plugin-google-analytics": "^3.0.0",
"gatsby-plugin-image": "^1.0.0",
"gatsby-plugin-layout": "^2.0.0",
"gatsby-plugin-load-script": "^1.0.6",
"gatsby-plugin-manifest": "^3.0.0",
"gatsby-plugin-netlify": "^3.0.0",
"gatsby-plugin-nprogress": "^3.0.0",
"gatsby-plugin-offline": "^4.0.0",
"gatsby-plugin-react-helmet": "^4.0.0",
"gatsby-plugin-react-svg": "^3.0.0",
"gatsby-plugin-robots-txt": "^1.5.0",
"gatsby-plugin-sharp": "^3.0.0",
"gatsby-plugin-sitemap": "^3.0.0",
"gatsby-plugin-theme-ui": "^0.3.0",
"gatsby-plugin-typography": "^3.0.0",
"gatsby-source-datocms": "^2.5.17",
"gatsby-source-filesystem": "^3.0.0",
"gatsby-source-instagram": "^0.9.0",
"gatsby-source-netlify": "^1.0.4",
"gatsby-source-yotpo": "^0.8.3",
"gatsby-transformer-remark": "^3.0.0",
"gatsby-transformer-remark-frontmatter": "^1.0.1",
"gatsby-transformer-sharp": "^3.0.0",
"github-slugger": "^1.3.0",
"imagemin-pngquant": "^9.0.1",
"install": "^0.13.0",
"pngquant-bin": "^6.0.0",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-collapsible": "^2.8.3",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "^17.0.1",
"react-ga": "^3.3.0",
"react-google-maps": "^9.4.5",
"react-helmet": "^6.1.0",
"react-hook-form": "^6.13.1",
"react-instantsearch-dom": "^6.10.3",
"react-paginate": "^7.1.0",
"react-responsive": "^8.0.3",
"react-select": "^4.1.0",
"react-spring": "^8.0.1",
"react-transition-group": "^4.3.0",
"react-use-measure": "^2.0.3",
"react-window": "^1.8.6",
"theme-ui": "^0.3.5"
},

to reproduce the error.

[steffik02]

Also getting the same error as shown by vsimak after upgrading to v3. Here are the plugins I currently have, I italicized the ones that vsimak also has. I'm running node 12.16.3 on Windows.

"@contentful/rich-text-react-renderer": "^13.4.0",
"@loadable/component": "^5.13.1",
"@sendgrid/mail": "^7.4.0",
"acorn": "^7.2.0",
"bootstrap": "^4.5.0",
"contentful-management": "^6.1.1",
"firebase": "^7.19.1",
"fs": "0.0.1-security",
"gatsby": "^3.0.1",
"gatsby-awesome-pagination": "^0.3.6",
"gatsby-image": "^3.0.0",
"gatsby-link": "^3.0.0",
"gatsby-plugin-google-analytics": "^3.0.0",
"gatsby-plugin-google-fonts": "^1.0.1",
"gatsby-plugin-image": "^1.0.0",
"gatsby-plugin-loadable-components-ssr": "^2.1.0",
"gatsby-plugin-lodash": "^4.0.0",
"gatsby-plugin-manifest": "^3.0.0",
"gatsby-plugin-netlify": "^3.0.0",
"gatsby-plugin-offline": "^4.0.0",
"gatsby-plugin-react-helmet": "^4.0.0",
"gatsby-plugin-react-svg": "^3.0.0",
"gatsby-plugin-sass": "^4.0.0",
"gatsby-plugin-sharp": "^3.0.0",
"gatsby-plugin-sitemap": "^3.0.0",
"gatsby-react-router-scroll": "^4.0.0",
"gatsby-remark-external-links": "0.0.4",
"gatsby-remark-images": "^4.0.0",
"gatsby-remark-relative-images": "^1.1.1",
"gatsby-source-contentful": "^5.0.0",
"gatsby-source-filesystem": "^3.0.0",
"gatsby-source-instagram": "^0.9.0",
"gatsby-source-youtube-v2": "^1.0.1",
"gatsby-source-youtube-v3": "^3.0.0",
"gatsby-transformer-remark": "^3.0.0",
"gatsby-transformer-sharp": "^3.0.0",
"ink": "^2.7.1",
"lodash": "^4.17.19",
"moment": "^2.27.0",
"netlify-lambda": "^2.0.1",
"node-sass": "^4.14.1",
"postscribe": "^2.0.8",
"prop-types": "^15.7.2",
"qs": "^6.9.4",
"react": "^16.12.0",
"react-cookie-consent": "^5.1.3",
"react-dom": "^16.12.0",
"react-helmet": "^6.0.0",
"react-moment": "^0.9.7",
"react-ratings-declarative": "^3.4.1",
"react-share": "^4.3.1",
"react-switch": "^6.0.0",
"react-truncate": "^2.4.0",
"react-truncate-markup": "^5.0.0",
"redaxios": "^0.3.0",
"typescript": "^3.9.7"

[LukeVibes]

Also getting the same error:

 ERROR 

(node:12552) [DEP_WEBPACK_MAIN_TEMPLATE_OUTPUT_OPTIONS] DeprecationWarning: MainTemplate.outputOptions is
deprecated (use Compilation.outputOptions instead)
(Use `node --trace-deprecation ...` to show where the warning was created)


 ERROR 

(node:12552) [DEP_WEBPACK_MAIN_TEMPLATE_REQUIRE] DeprecationWarning: MainTemplate.hooks.require is deprecated (use JavascriptModulesPlugin.getCompilationHooks().renderRequire instead)


 ERROR 

(node:12552) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning:
Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader

⠦ Building development bundle
Error: NormalModuleFactory.afterResolve (ReactRefreshPlugin) 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.

Dependencies:

"dependencies": {
    "@apollo/client": "^3.3.11",
    "babel-plugin-styled-components": "^1.12.0",
    "dotenv": "^8.2.0",
    "gatsby": "^3.0.2",
    "gatsby-plugin-apollo": "^3.0.2",
    "gatsby-plugin-react-helmet": "^3.10.0",
    "gatsby-plugin-styled-components": "^3.10.0",
    "gatsby-source-filesystem": "^2.11.0",
    "gatsby-source-graphql": "^2.14.0",
    "isomorphic-fetch": "^2.2.1",
    "netlify-cli": "^2.71.0",
    "netlify-lambda": "^2.0.3",
    "normalize.css": "^8.0.1",
    "react": "^16.14.0",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "styled-components": "^5.2.1"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "cross-env": "^7.0.3",
    "eslint": "^7.21.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^6.15.0",
    "eslint-config-wesbos": "^1.0.1",
    "eslint-plugin-html": "^6.1.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "esm": "^3.2.25",
    "gatsby-plugin-graphql-image": "^1.0.1",
    "prettier": "^2.2.1"
  },

[chawax]

Same problem :

(node:28032) [DEP_WEBPACK_MAIN_TEMPLATE_OUTPUT_OPTIONS] DeprecationWarning: MainTemplate.outputOptions is deprecated (use Compilation.outputOptions instead)


 ERROR 

(node:28032) [DEP_WEBPACK_MAIN_TEMPLATE_REQUIRE] DeprecationWarning: MainTemplate.hooks.require is deprecated (use JavascriptModulesPlugin.getCompilationHooks().renderRequire
instead)


 ERROR 

(node:28032) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to
NormalModule.getCompilationHooks(compilation).loader

⠀
info  gatsby-source-wordpress  Watching for WordPress changes
⠏ Building development bundle
Error: NormalModuleFactory.afterResolve (ReactRefreshPlugin) 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.
    at /Users/xxxxxx/dev/xxxxxx/gatsby/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:290:14
    at Hook.eval [as callAsync] (eval at create (/Users/xxxxxx/dev/xxxxxx/gatsby/node_modules/gatsby/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/xxxxxx/dev/xxxxxx/gatsby/node_modules/gatsby/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/xxxxxx/dev/xxxxxx/gatsby/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:286:30
    at eval (eval at create (/Users/xxxxxx/dev/xxxxxx/gatsby/node_modules/gatsby/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /Users/xxxxxx/dev/xxxxxx/gatsby/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:536:7
    at /Users/xxxxxx/dev/xxxxxx/gatsby/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:118:11
    at /Users/xxxxxx/dev/xxxxxx/gatsby/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:568:8
    at NormalModuleFactory.resolveRequestArray (/Users/xxxxxx/dev/xxxxxx/gatsby/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:907:34)
    at /Users/xxxxxx/dev/xxxxxx/gatsby/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:560:11
    at /Users/xxxxxx/dev/xxxxxx/gatsby/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:118:11
    at /Users/xxxxxx/dev/xxxxxx/gatsby/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:640:8
    at /Users/xxxxxx/dev/xxxxxx/gatsby/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:778:5
    at finishResolved (/Users/xxxxxx/dev/xxxxxx/gatsby/node_modules/gatsby/node_modules/enhanced-resolve/lib/Resolver.js:278:11)
    at /Users/xxxxxx/dev/xxxxxx/gatsby/node_modules/gatsby/node_modules/enhanced-resolve/lib/Resolver.js:342:25
    at /Users/xxxxxx/dev/xxxxxx/gatsby/node_modules/gatsby/node_modules/enhanced-resolve/lib/Resolver.js:409:24

My dependencies :

  "dependencies": {
    "@apollo/react-hooks": "^4.0.0",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/styles": "^4.11.3",
    "apollo-boost": "^0.4.9",
    "esm": "^3.2.25",
    "gatsby": "^3.0.0",
    "gatsby-image": "^3.0.0",
    "gatsby-plugin-catch-links": "^3.0.0",
    "gatsby-plugin-manifest": "^3.0.0",
    "gatsby-plugin-material-ui": "^2.1.10",
    "gatsby-plugin-offline": "^4.0.0",
    "gatsby-plugin-react-helmet": "^4.0.0",
    "gatsby-plugin-react-leaflet": "^3.0.0",
    "gatsby-plugin-sharp": "^3.0.0",
    "gatsby-source-filesystem": "^3.0.0",
    "gatsby-transformer-sharp": "^3.0.0",
    "graphql-tag": "^2.11.0",
    "isomorphic-fetch": "^3.0.0",
    "leaflet": "^1.7.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "numeral": "^2.0.6",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-apollo": "^3.1.5",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-leaflet": "^3.1.0",
    "react-leaflet-markercluster": "^3.0.0-rc1"
  },
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@storybook/addon-actions": "^5.3.21",
    "@storybook/addon-links": "^5.3.21",
    "@storybook/addons": "^5.3.21",
    "@storybook/react": "^5.3.21",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.2",
    "babel-preset-gatsby": "^1.0.0",
    "gatsby-source-wordpress": "^5.0.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.6.3",
    "prettier": "^2.2.1",
    "react-test-renderer": "^17.0.1"
  },

Environment :

• MacOS Big Sur 11.2.1
• Node 13.13.0

[cymkd]

The fix:
rm -rf node_modules
npm i --legacy-peer-deps
(im on npm 7.5, if you are npm <7 version, just npm install)

That solved it for me.

[chawax]

I just found this issue on react-refresh-webpack-plugin about problems with Webpack 5. But I can't find where it is used.

pmmmwh/react-refresh-webpack-plugin#27

I deleted node_modules and package-lock.json, run npm install and it looks OK now (other problems, but no more this one).

[steffik02]

I just found this issue on react-refresh-webpack-plugin about problems with Webpack 5. But I can't find where it is used.

pmmmwh/react-refresh-webpack-plugin#27

I deleted node_modules and package-lock.json, run npm install and it looks OK now (other problems, but no more this one).

Fixed my issue as well!

[LekoArts]

Hi folks!

While I understand that it's easy to paste the build log and the list of Gatsby dependencies, it sadly doesn't help us resolve this issue. Most importantly, we miss the information what environment you're in (the bug template asks for this with gatsby info --clipboard) and secondly we don't have a minimal reproduction yet.

This sounds like your npm install did go wrong, and not something wrong with Gatsby.

[chawax]

I understand you need a minimal reproduction, but such bugs are really hard to reproduce.
But as you said it was a problem with npm install, probably about migration to Webpack 5.
Maybe it could be recommended in the upgrade documentation to delete node_modules and package-lock.json ?