ERROR #98123 WEBPACK Generating development JavaScript bundle failed on `gatsby develop`

Question

I ran the following commands to create a new gatsby starter blog:

gatsby new blog https://github.com/alxshelepenok/gatsby-starter-lumen

cd blog

gatsby develop

But during gatsby develop, I'm getting a lot of errors named ERROR #98123 WEBPACK saying- Generating development JavaScript bundle failed.

I've been trying for so long and deleted and installed the repo again and again, and also deleted node_modules and package-lock.json and then npm install but getting the same error again. Help me out!

For details, here is the complete list of errors I am getting (it's a bit long):

Packages:

 node v10.19.0
 npm 6.14.4
 OS: Ubunut 20.04LTS

    "gatsby": "^2.31.1",
    "gatsby-cli": "^2.18.0",
    "gatsby-link": "^2.10.0",
    "gatsby-plugin-catch-links": "^2.9.0",
    "gatsby-plugin-feed": "^2.12.0",
    "gatsby-plugin-flow": "^1.9.0",
    "gatsby-plugin-google-gtag": "^2.7.0",
    "gatsby-plugin-manifest": "^2.11.0",
    "gatsby-plugin-netlify": "^2.10.0",
    "gatsby-plugin-netlify-cms": "^4.9.0",
    "gatsby-plugin-offline": "^3.9.0",
    "gatsby-plugin-optimize-svgs": "^1.0.5",
    "gatsby-plugin-react-helmet": "^3.9.0",
    "gatsby-plugin-sass": "^3.1.0",
    "gatsby-plugin-sharp": "^2.13.1",
    "gatsby-plugin-sitemap": "^2.11.0",
    "gatsby-remark-autolink-headers": "^2.10.0",
    "gatsby-remark-copy-linked-files": "^2.9.0",
    "gatsby-remark-external-links": "0.0.4",
    "gatsby-remark-images": "^3.10.0",
    "gatsby-remark-katex": "^3.9.0",
    "gatsby-remark-prismjs": "^3.12.0",
    "gatsby-remark-relative-images": "^2.0.2",
    "gatsby-remark-responsive-iframe": "^2.10.0",
    "gatsby-remark-smartypants": "^2.9.0",
    "gatsby-source-filesystem": "^2.10.0",
    "gatsby-transformer-remark": "^2.15.0",
    "gatsby-transformer-sharp": "^2.11.0",
    ```

Dentil

Answer 1

My problem was similar. I installed a new Gatsby site, no plugins, and when making simple HTML changes, then previewing the DEVELOP site and refreshing, every time I would see these webpack errors that were cryptic at best.

This fixed everything:

1. Stop server (ctrl+C)
2. Run gatsby clean
3. Delete node_modules folder
4. Delete package-lock.json file
5. Install Yarn if it isn't installed already (npm install -g yarn)
6. Run yarn install (yarn install)
7. Restart your server and test (gatsby develop)

Credit goes to Ferran.

Adlare

delete package-lock.json file and not just node_modules folder helped me out, thanks – Voiceful

Answer 2

The issues are quite self-explanatory:

/home/myPC/Documents/blog/src/components/Feed/Feed.js
  4:13  error  Parsing error: Unexpected token {
✖ 1 problem (1 error, 0 warnings)

File: src/components/Feed/Feed.js

/home/myPC/Documents/blog/src/components/Icon/Icon.js
  5:6  error  Parsing error: Unexpected token Props

✖ 1 problem (1 error, 0 warnings)

File: src/components/Icon/Icon.js

And so on...

As you can see in their repository, you must use yarn instead of npm since the dependencies are lock using yarn.lock file.

So, remove your node_modules, your cache folder and run yarn install(you may need to install it before).

Willy

Where is the cache folder? – Dentil

Just run gatsby clean, it's a built-in method for deleting the cache folder (it's in the root of the folder, named .cache) – Willy

Have you removed the package-lock.json too? – Willy

Answer 3

I got this error because there was an apostrophe and/or space in my windows username. Switching to another user solved the problem. If your error includes the following this might be your problem too.

./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js

Huckaback

Answer 4

I just removed node modules , cache folder and public folder . After that I simply run

npm i 
gatsby clean && gatsby build

My issue was fixed after that

Renteria