Gatsby V3 migration build error

[modulareverything]

I'm migrating to Gatsby V3 from V2 and I'm hitting some errors that I can't see documented anywhere else. It's a relatively plain Gatsby set up, with no custom webconfig packages.

The only thing I could think of that might be tripping it up is that I'm using this line I found in another repo to allow me to use ES6 imports instead of require:

cross-env NODE_OPTIONS=\"-r esm\" gatsby develop

However, I've tried removing this and setting everything back to require and module exports, and I get the exact same error.

To migrate to V3, so far, I've done this:

1. Upgraded gatsby itself with npm install gatsby@latest, which put it at 3.0.1
2. Upgraded any outdated gatsby packages with npm outdated and installing the latest versions
3. Upgraded react and react-dom to 17.0.1

When I run npm run start I get this in the console:

$ npm run start

> [email protected] start /Users/chrish-d/dev/website-name
> npm run develop


> [email protected] develop /Users/chrish-d/dev/website-name
> cross-env NODE_OPTIONS="-r esm" gatsby develop

success open and validate gatsby-configs - 0.109s
warn Plugin gatsby-source-sanity is not compatible with your gatsby
version 3.0.1 - It requires gatsby@^2.2.0
success load plugins - 1.991s
success onPreInit - 0.065s
success initialize cache - 0.031s
success copy gatsby files - 0.230s
info [sanity] Fetching remote GraphQL schema
info [sanity] Transforming to Gatsby-compatible GraphQL SDL
info [sanity] Stitching GraphQL schemas from SDL
success onPreBootstrap - 0.465s
success createSchemaCustomization - 0.014s
info [sanity] Fetching export stream for dataset
info [sanity] Overlaying 20 drafts
info [sanity] Watch mode enabled, starting a listener
info [sanity] Done! Exported 533 documents.
success Checking for changed pages - 0.001s
success source and transform nodes - 4.938s
success building schema - 0.878s
info Total nodes: 688, SitePage nodes: 119 (use --verbose for
breakdown)
success createPages - 0.505s
success Checking for changed pages - 0.001s
success createPagesStatefully - 0.092s
success update schema - 0.036s
success write out redirect data - 0.001s
success Build manifest and related icons - 0.118s
success onPostBootstrap - 0.123s
info bootstrap finished - 16.451s
success onPreExtractQueries - 0.005s
success extract queries from components - 0.883s
success write out requires - 0.006s
success run static queries - 0.039s - 7/7 179.55/s
success run page queries - 0.204s - 2/2 9.82/s
⠙ Building development bundle

 ERROR

(node:24143) [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:24143) [DEP_WEBPACK_MAIN_TEMPLATE_REQUIRE] DeprecationWarning:
MainTemplate.hooks.require is deprecated (use
JavascriptModulesPlugin.getCompilationHooks().renderRequire instead)


 ERROR

(node:24143) [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.
    at /Users/chrish-d/dev/website-name/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:290:14
    at Hook.eval [as callAsync] (eval at create (/Users/chrish-d/dev/website-name/node_modules/gatsby/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/chrish-d/dev/website-name/node_modules/gatsby/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/chrish-d/dev/website-name/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:286:30
    at eval (eval at create (/Users/chrish-d/dev/website-name/node_modules/gatsby/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/chrish-d/dev/website-name/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:536:7
    at /Users/chrish-d/dev/website-name/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:118:11
    at /Users/chrish-d/dev/website-name/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:568:8
    at NormalModuleFactory.resolveRequestArray (/Users/chrish-d/dev/website-name/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:907:34)
    at /Users/chrish-d/dev/website-name/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:560:11
    at /Users/chrish-d/dev/website-name/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:118:11
    at /Users/chrish-d/dev/website-name/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:640:8
    at /Users/chrish-d/dev/website-name/node_modules/gatsby/node_modules/webpack/lib/NormalModuleFactory.js:778:5
    at finishResolved (/Users/chrish-d/dev/website-name/node_modules/gatsby/node_modules/enhanced-resolve/lib/Resolver.js:278:11)
    at /Users/chrish-d/dev/website-name/node_modules/gatsby/node_modules/enhanced-resolve/lib/Resolver.js:342:25
    at /Users/chrish-d/dev/website-name/node_modules/gatsby/node_modules/enhanced-resolve/lib/Resolver.js:409:24
npm ERR! code ELIFECYCLE
npm ERR! errno 7
npm ERR! [email protected] develop: `cross-env NODE_OPTIONS="-r esm" gatsby develop`
npm ERR! Exit status 7
npm ERR!
npm ERR! Failed at the [email protected] develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/chrish/.npm/_logs/2021-03-04T16_41_15_850Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 7
npm ERR! [email protected] start: `npm run develop`
npm ERR! Exit status 7
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/chrish/.npm/_logs/2021-03-04T16_41_15_900Z-debug.log

Here's the contents of my package.json file:

{
  "name": "website-name",
  "version": "0.1.0",
  "description": "...",
  "license": "ISC",
  "scripts": {
    "build": "cross-env NODE_OPTIONS=\"-r esm\" gatsby build",
    "develop": "cross-env NODE_OPTIONS=\"-r esm\" gatsby develop",
    "start": "npm run develop",
    "serve": "cross-env NODE_OPTIONS=\"-r esm\" gatsby serve",
    "clean": "gatsby clean",
    "netlify": "netlify dev",
    "prebuild": "netlify-lambda install",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  },
  "eslintConfig": {
    "extends": [
      "wesbos"
    ],
    "rules": {
      "react/prop-types": 0
    }
  },
  "dependencies": {
    "@reach/router": "^1.3.4",
    "@sanity/block-content-to-react": "^2.0.7",
    "@sanity/client": "^2.2.6",
    "babel-plugin-styled-components": "^1.12.0",
    "contrast": "^1.0.1",
    "dotenv": "^8.2.0",
    "gatsby": "^3.0.1",
    "gatsby-image": "^3.0.0",
    "gatsby-plugin-google-gtag": "^3.0.0",
    "gatsby-plugin-mailchimp": "^5.2.2",
    "gatsby-plugin-manifest": "^3.0.0",
    "gatsby-plugin-nprogress": "^3.0.0",
    "gatsby-plugin-offline": "^4.0.0",
    "gatsby-plugin-react-helmet": "^4.0.0",
    "gatsby-plugin-scroll-reveal": "0.0.7",
    "gatsby-plugin-sitemap": "^3.0.0",
    "gatsby-plugin-styled-components": "^4.0.0",
    "gatsby-source-sanity": "^6.0.5",
    "get-youtube-id": "^1.0.1",
    "headroom.js": "^0.12.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "netlify-cli": "^2.62.0",
    "netlify-lambda": "^2.0.1",
    "normalize.css": "^8.0.1",
    "prop-types": "^15.7.2",
    "query-string": "^6.13.8",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-hook-form": "^6.14.2",
    "react-icons": "^4.1.0",
    "react-instagram-embed": "^2.0.0",
    "react-player": "^2.9.0",
    "react-twitter-widgets": "^1.9.5",
    "react-youtube": "^7.13.0",
    "styled-components": "^5.2.1",
    "swiper": "^6.4.15"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "cross-env": "^7.0.2",
    "eslint": "^7.16.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.0",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "esm": "^3.2.25",
    "prettier": "^2.2.1",
    "stylelint": "^13.8.0",
    "stylelint-config-property-sort-order-smacss": "^7.0.0",
    "stylelint-order": "^4.1.0",
    "webpack-cli": "^4.5.0"
  },
  "resolutions": {
    "styled-components": "^5"
  },
}

[modulareverything]

Is there a better place to get support on this?

Edit: Thanks to LekoArts, the answer is below ⬇️

[LekoArts]

Did you see this issue? #29975

[modulareverything]

Thanks @LekoArts I think this issue was posted after I posted this. I'll check over at that issue and mark this as resolved 👍

[LekoArts]

Yeah, like I can't answer you if the ESM stuff still works, but at least the error you mentioned here is the same as in the issue :)