gatsby: Error: NormalModuleFactory.afterResolve (ReactRefreshPlugin) is no longer a waterfall hook, but a bailing hook instead.
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® Core™ 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
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 5
- Comments: 18 (6 by maintainers)
I had this issue as well, and nuking
node_modulesfixed it… but this isn’t a suitable answer given that this is what most people would be doing. I was upgrading a project with lots of dependencies from gatsby v2 to v3.After lots of trial and error, I was able to create a minimal reproduction and determine the issue is a webpack version conflict. One of my dependencies has webpack@4 listed as a dependency. When you upgrade from Gatsby v2 to v3, it doesn’t install webpack@5 as expected, or indeed, as required. When you do a fresh install after upgrading to v3, it will correctly install webpack@5.
https://github.com/njbmartin/gatsby-v3-upgrade-issue
I just found this issue on
react-refresh-webpack-pluginabout problems with Webpack 5. But I can’t find where it is used.https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/27
I deleted
node_modulesandpackage-lock.json, runnpm installand it looks OK now (other problems, but no more this one).For what it’s worth cleaning
node_modulesandpackage-lock.jsondidn’t fix it for me. I had tonpm i -D webpack@latest --legacy-peer-depsas suggested https://github.com/gatsbyjs/gatsby/issues/29975#issuecomment-792294965I’ve added a note to the migration guide, including a part of the error, in the hopes that Google users will directly find that portion 😃 As such this issue is closed as it’s not a Gatsby bug but package manager weirdness.
In my setup
npminstalledwebpack@4instead ofwebpack@5, and fresh reinstalls didn’t help. So I manually addedwebpack@5in thepackage.jsondependencies list and it solved the issue.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 installdid go wrong, and not something wrong with Gatsby.Also getting the same error:
Dependencies:
Fixed my issue as well!
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.
Same problem :
My dependencies :
Environment :
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”
Having the exact same issue. yoga-layout-prebuilt is mentioned tapable is mentioned.
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.