Generating development JavaScript bundle failed (WebPack & gatsby-plugin-image)

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

When I run gatsby develop I get the following error message:

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

No element indexed by 0

File: node_modules/gatsby-plugin-image/dist/gatsby-image.browser.modern.js

failed Building development bundle - 6.533s
ERROR in ./node_modules/gatsby-plugin-image/dist/gatsby-image.browser.modern.js
Module build failed (from ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js):
Error: No element indexed by 0
    at ArraySet.at
(/Users/isaactait/Desktop/Web_Dev/Fallfish_Tenkara_v2/node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/source-map/lib/array-set.js:88:11)
    at Array.<anonymous> (/Users/isaactait/Desktop/Web_Dev/Fallfish_Tenkara_v2/node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/source-map/lib
/source-map-consumer.js:374:42)
    at mapping_callback
(/Users/isaactait/Desktop/Web_Dev/Fallfish_Tenkara_v2/node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/source-map/lib/wasm.js:64:52)
    at null.<anonymous> (wasm://wasm/0002f8d6:1:15533)
    at /Users/isaactait/Desktop/Web_Dev/Fallfish_Tenkara_v2/node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/source-map/lib/source-map-consume
r.js:387:30
    at Object.withMappingCallback
(/Users/isaactait/Desktop/Web_Dev/Fallfish_Tenkara_v2/node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/source-map/lib/wasm.js:95:11)
    at BasicSourceMapConsumer.eachMapping (/Users/isaactait/Desktop/Web_Dev/Fallfish_Tenkara_v2/node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modul
es/source-map/lib/source-map-consumer.js:371:16)
    at Function.fromStringWithSourceMap
(/Users/isaactait/Desktop/Web_Dev/Fallfish_Tenkara_v2/node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/source-map/lib/source-node.js:87:24)
    at Object._loader (/Users/isaactait/Desktop/Web_Dev/Fallfish_Tenkara_v2/node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js:79:31)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
 @ ./src/pages/toll-roads.js 10:0-78 21:14-30 21:31-39 23:11-19 35:40-51 62:40-51
 @ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 81:11-83:5
 @ ./.cache/app.js 17:0-52 30:87-34:1 33:29-42 36:27-40 30:0-34:2

develop compiled with 1 error
success Writing page-data.json files

I tried deleting my node_modules and re-running npm install I also ran gatsby clean and the error is still there. I am able to run gatsby build without any errors though and my site is deploying to Gatsby Cloud without any problems. It seems to be just a local development environment issue…

Reproduction Link

https://github.com/Isaac-Tait/Fallfish_Tenkara

Steps to Reproduce

1. Run gatsby develop
2. The error appears in the console

…

Expected Result

I should have a development environment open up at localhost://8001

Actual Result

Instead I get the error and my localhost just shows a blank white screen

Environment

System:
    OS: macOS 12.4
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.3.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.11.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 102.0.5005.61
    Firefox: 100.0.1
    Safari: 15.5
  npmPackages:
    gatsby: ^4.16.0 => 4.16.0
    gatsby-awesome-pagination: ^0.3.8 => 0.3.8
    gatsby-plugin-disqus: ^1.2.4 => 1.2.4
    gatsby-plugin-feed: ^4.16.0 => 4.16.0
    gatsby-plugin-gatsby-cloud: ^4.16.0 => 4.16.0
    gatsby-plugin-google-analytics: ^4.16.0 => 4.16.0
    gatsby-plugin-image: ^2.16.1 => 2.16.1
    gatsby-plugin-manifest: ^4.16.0 => 4.16.0
    gatsby-plugin-offline: ^5.16.0 => 5.16.0
    gatsby-plugin-postcss: ^5.16.0 => 5.16.0
    gatsby-plugin-react-helmet: ^5.16.0 => 5.16.0
    gatsby-plugin-sharp: ^4.16.1 => 4.16.1
    gatsby-remark-copy-linked-files: ^5.16.0 => 5.16.0
    gatsby-remark-images: ^6.16.0 => 6.16.0
    gatsby-remark-prismjs: ^6.16.0 => 6.16.0
    gatsby-remark-responsive-iframe: ^5.16.0 => 5.16.0
    gatsby-remark-smartypants: ^5.16.0 => 5.16.0
    gatsby-source-filesystem: ^4.16.0 => 4.16.0
    gatsby-transformer-remark: ^5.16.0 => 5.16.0
    gatsby-transformer-sharp: ^4.16.0 => 4.16.0
  npmGlobalPackages:
    gatsby-cli: 2.12.111

Config Flags

N/A

[LekoArts]

source-map@0.7.3 wasn’t compatible with Node 18 but in https://github.com/mozilla/source-map/issues/452 they released source-map@0.7.4. Your lock files says that @pmmmwh/react-refresh-webpack-plugin uses 0.7.3 but if I delete your lock file and run a fresh install I (of course) get @pmmmwh/react-refresh-webpack-plugin#source-map@0.7.4. I tested it on Node 18 and it works 😃

[dpw1]

This is how I fixed it:

1. Delete the yarn.lock file;
2. yarn install;
3. gatsby clean
4. gatsby develop

I hope it helps.