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

[njbmartin]

TLDR: One of your dependencies is still using webpack@4, but Gatsby requires webpack@5. You can manually add webpack@5 as a dependency to avoid nuking node_modules, though it may break your other dependencies.

I had this issue as well, and nuking node_modules fixed 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

  System:
    OS: Linux 4.19 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 14.15.4 - /tmp/yarn--1615093978428-0.7161197614854362/node
    Yarn: 1.22.5 - /tmp/yarn--1615093978428-0.7161197614854362/yarn
    npm: 6.14.10 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    gatsby: ^3.0.3 => 3.0.3

[larsenwork]

For what it’s worth cleaning node_modules and package-lock.json didn’t fix it for me. I had to npm i -D webpack@latest --legacy-peer-deps as suggested https://github.com/gatsbyjs/gatsby/issues/29975#issuecomment-792294965

npm 7.6.3
gatsby 3.1.2