Gatsby: Webpack error #98123 when running "gatsby develop"

[coldPen]

Description

gatsby develop doesn't work because of an error #98123 from Webpack.

Steps to reproduce

1. Clone my repo
2. cd into that repo
3. Run npm install
4. Run gatsby develop

Expected result

Development server should start

Actual result

I get this output:

ERROR #98123  WEBPACK
Generating SSR bundle failed
[BABEL] /home/fw33n/ateliers-chartreux/.cache/develop-static-entry.js: Cannot find module '@babel/helper-create-class-features-plugin' (While processing: "/home/fw33n/ateliers-chartreux/node_modules/@babel/plugin-proposal-class-properties/lib/index.js")
File: .cache/develop-static-entry.js
⠼ start webpack server

Environment

gatsby info --clipboard (I'm running Ubuntu in WSL):

System:
  OS: Linux 4.4 Ubuntu 18.04.2 LTS (Bionic Beaver)
  CPU: (8) x64 Intel(R) Core(TM) i7-4790 CPU @ 3.60GHz
  Shell: 4.4.19 - /bin/bash
Binaries:
  Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
  npm: 6.11.3 - ~/.nvm/versions/node/v10.16.3/bin/npm
Languages:
  Python: 2.7.15+ - /usr/bin/python
npmPackages:
  gatsby: ^2.15.9 => 2.15.9
  gatsby-plugin-sass: ^2.1.13 => 2.1.13
  gatsby-source-contentful: ^2.1.33 => 2.1.33
npmGlobalPackages:
  gatsby-cli: 2.7.47

Additionnally, my package.json:

{
  "name": "ateliers-chartreux",
  "private": true,
  "description": "Le site des Ateliers Chartreux",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \""
  },
  "dependencies": {
    "gatsby": "^2.15.9",
    "gatsby-plugin-sass": "^2.1.13",
    "gatsby-source-contentful": "^2.1.33",
    "node-sass": "^4.12.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  },
  "devDependencies": {
    "prettier": "^1.18.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

[jonniebigodes]

@coldPen sorry that you're experiencing errors with gatsby, but based on the description itself it's a bit difficult to triage. Also you forgot to link the repo.

[coldPen]

Thank you @jonniebigodes , here's the repo although I'm not sure this has anything to do with the project itself, I can run develop and build on my Linux computer, this seems specific to WSL?

[jonniebigodes]

@coldPen cloning it to my wsl machine and going to take a look at what could be the issue.

[jonniebigodes]

@coldPen i've been testing this today and this one is kinda tricky to triage. Here are the steps i took.

• Cloned the repo into my ubuntu wsl "machine". I'm running Ubuntu 18.04 LTS
• Here's the result of gatsby info in Ubuntu.
  
• Installed the dependencies and issued sudo yarn develop, since i've not configured yarn/npm i've got to run it with elevated privileges and i'm presented with the following:
  

The errors thrown are based on the fact that i confugured a space for issues regarding gatsby and contenful and when the plugin tries to fetch the data based on your query it will fail.

I would like for you to do a couple of steps to see if you can get it to run in wsl.

• Remove package-lock.json and/or yarn.lock
• Issue gatsby clean to purge any stale data.
• Remove node_modules folder.
• Install the dependencies again with your package manager of choice, either npm or yarn.
• Issue gatsby develop and see if the error does not pop back.

These because if memory serves me right it could be some issue with a package.

Feel free to provide feedback so that we can close this issue or continue to work on it until we find a suitable solution.

[coldPen]

Thank you for paying close attention to this! I'll get back to you as soon as I get back on this computer.

[shicholas]

I am seeing this error too. My code works fine on my mac, but fails in CI, which uses Ubuntu (https://circleci.com/gh/1337lawyers/web/360)

[shicholas]

I solved my issue by adding python to my environment - perhaps it's the same issue you're having @coldPen ?

[coldPen]

@shicholas Python: 2.7.15+ - /usr/bin/python was displayed when I ran gatsby info, so I don't know? Maybe gatsby can't find python even if installed.

[jonniebigodes]

@shicholas locally on ubuntu 18.04 it comes with python 2.7+ if not mistaken.

[shicholas]

hmm, it's probably not it then. fwiw, I have Python 3.8 installed.

[shaneiadt]

I'm getting the same issue when attempting to run gatsby develop.

System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
  Binaries:
    Yarn: 1.17.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 2.7.15
  Browsers:
    Edge: 44.18362.329.0
  npmPackages:
    gatsby: ^2.15.18 => 2.15.18
    gatsby-image: ^2.2.19 => 2.2.19
    gatsby-plugin-manifest: ^2.2.17 => 2.2.17
    gatsby-plugin-offline: ^3.0.7 => 3.0.7
    gatsby-plugin-react-helmet: ^3.1.7 => 3.1.7
    gatsby-plugin-sharp: ^2.2.24 => 2.2.24
    gatsby-source-filesystem: ^2.1.24 => 2.1.24
    gatsby-transformer-sharp: ^2.2.15 => 2.2.15

I've tried gatsby clean & re-installed all npm packages but no joy :(

Any help would be great, not quite sure were to go from here.

[shaneiadt]

I've also updated to Python: 3.7.4 but still not working....dang!

[shaneiadt]

I tried moving the project folder to another directory as I had a special character in the folder path & everything works fine now 👍

Maybe check your folder structure doesn't have any special characters. @coldPen

[coldPen]

@shaneiadt thank you, but that isn't the case (repo is named ateliers-chartreux, is - considered a special character? )
@jonniebigodes I followed your instructions and nothing changed. I then reinstalled the Ubuntu subsystem and it's working again, fingers crossed!

[jonniebigodes]

@shaneiadt special characters would be for instance à,ç,é,â or ã, these being particular to the portuguese language, if it had used any of those for filenames and/or on path it would probably break the build.

I considered that the use of characters could be the case in the last test that i did, because one special character of those listed above is being used in a query, but i confirmed that was not the case by modifying the query in the appropriate file to my contentful space and it returned the data correctly.

Also when i test a issue that pops in here, i usually use the following nomenclature for testing, create a gatsby site called test-nameofauthorofissue and it works fine with either windows 10 or linux in vm or wsl.

@coldPen on one side i'm happy that it's working, but on the other side having to reinstall the wsl is something that is not actually productive if the issue persists.

[coldPen]

@jonniebigodes I feel this problem is largely beyond my understanding, furthermore this only concerned a work environment which I only use secondarily. I'm sorry but I need to make this repo private since I have to commit my environment variables file to start deploying it. Won't close the issue though, if you think it's still relevant?

[jonniebigodes]

@coldpen it could be some variable we're both missing, probably due to some permissions or something like that,go ahead and make the repo private and continue your work. I'll leave it you to if you want this open or not. If you want to close it feel free to do so and we can always re-open it.

[denvercoder]

For what it's worth I had this same issue and it came down to a case-sensitivity issue. It worked fine on my mac but failed on Netlify's servers because of some of the component names:

import Button from '../components/button

src
- components
- Button
-Button.js

[prydda]

npm run develop will get you up & running for now.

[mujeeb91]

I was facing the same issue. Here's what I did to fix it.

1. Uninstalled gatsby via npm uninstall -g gatsby-cli
2. Updated Node version from 8.9.0 -> 12.13.1 (using nvm)
3. Reinstalled gatsby via npm install -g gatsby-cli

[454de6e]

This error was introduced by updating an ESLint plugin, which is not related to Gatsby at all. My workaround is to delete yarn.lock and run yarn again to recreate the file. This may be a hint that the issue is triggered by a dependency that Gatsby and whatever caused it have in common.

[DevWichrowski]

Hello,
I also had that problem,I just created config file with wrong name ,for typography you need a file src/utils/typography.js

import Typography from "typography"
import fairyGateTheme from "typography-theme-fairy-gates"

const typography = new Typography(fairyGateTheme)

export const { scale, rhythm, options } = typography
export default typography

Also remember about gatsby-config.js in root

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],

[ForkInSpace]

For some of you the issue could be with the node version.
I just switched to node 10.13.0 from 8.9.4 with nvm and the development bundle compiles now w/o an error.

[Jongtelles]

I am still running into this issue now attempting to follow the Gatsby tutorial, running node v13.6.0

[pravynandas]

For what it's worth.. for the same package.json file, below two commands install the packages in node_modules quite differently. Pay attention to the 'core-js' folder (to which I'm getting #98123 WEBPACK error. The gatsby new version works great.

Note: Project under test is an official starter example from here

gatsby new gatsby-starter-redux-firebase https://github.com/muhajirdev/gatsby-starter-redux-firebase

npm install (with just only package.json file copied from above folder to another new folder)

Comparison of node_modules from both:

Error on gatsby develop

[Connor-Callahan]

deleted my .cache folder - worked like a charm.

[nimaiwalsh]

This error was introduced by updating an ESLint plugin, which is not related to Gatsby at all. My workaround is to delete yarn.lock and run yarn again to recreate the file. This may be a hint that the issue is triggered by a dependency that Gatsby and whatever caused it have in common.

This fixed it for me too.

[webmastervishal]

@coldPen i've been testing this today and this one is kinda tricky to triage. Here are the steps i took.

• Cloned the repo into my ubuntu wsl "machine". I'm running Ubuntu 18.04 LTS
• Here's the result of gatsby info in Ubuntu.
  
• Installed the dependencies and issued sudo yarn develop, since i've not configured yarn/npm i've got to run it with elevated privileges and i'm presented with the following:
  

The errors thrown are based on the fact that i confugured a space for issues regarding gatsby and contenful and when the plugin tries to fetch the data based on your query it will fail.

I would like for you to do a couple of steps to see if you can get it to run in wsl.

• Remove package-lock.json and/or yarn.lock
• Issue gatsby clean to purge any stale data.
• Remove node_modules folder.
• Install the dependencies again with your package manager of choice, either npm or yarn.
• Issue gatsby develop and see if the error does not pop back.

These because if memory serves me right it could be some issue with a package.

Feel free to provide feedback so that we can close this issue or continue to work on it until we find a suitable solution.

Works perfectly fine

[alveshelio]

I'm running into this issue too and I'm on a Mac but my setup is within a monorepo. If I create a new project outside of the monorepo I have no issues, however, if I create a new project within my monorepo or if I create it outside and move it to the monorepo I start having this issue.

One way I found was to remove node_modules and instead of using yarn, I've used npm install and it works just fine. However, this is a no go for me since I need to use yarn workspaces.
Has anyone experiences this same issue with a monorepo?

[bigxalx]

I've been running into this issue using gatsby build (development worked fine) after updating an old gatsby v1 codebase to v2.
It gave me the an additional message that webpack has some error with "vw". Didn't mention file name. I was able to fix it by pinning down the issue to a CSS file and editing the rules that contained calc and vw. It didn't like vw in the denominator. For example I changed stuff like calc(1/5vw) into calc(1vw/5).
Hope this is helpful to anyone who's getting the same issue.

[davidshq]

I'm also running into this issue. I've attempted:

1. Running gatsby clean.
2. Deleting node_modules, package-lock.json and then re-running npm install followed by gatsby develop.

I'm using a Windows 10 Professional computer running an administrator session on Windows command prompt.

Seems like #19922 and #19268 may be related.

(I had tried using WSLv2 and Git Bash but encountered other issues with these)

[go-cristian]

I was facing this also, adding "babel-preset-gatsby" to my babel config did the trick.

[software2019]

Hi,
I having the following issue when running it. Could you please help me?
I am developing on my Mac.

[software2019]

Hi,

I have resolved the issue anyways.

Thanks

[karthickram286]

This is how I solved this problem,

1. Switched to node version 12.6.1 using nvm
2. Remove .cache, node_modules and package-lock.json/yarn-lock.json.
3. npm install

If the issue persists still, try doing a gatsby clean.

[aaronadamsCA]

I resolved this by removing an old .babelrc.json that referred to a plugin I'd uninstalled.

So if you're stuck, check that too!

[johnmikel]

@coldPen i've been testing this today and this one is kinda tricky to triage. Here are the steps i took.

• Cloned the repo into my ubuntu wsl "machine". I'm running Ubuntu 18.04 LTS
• Here's the result of gatsby info in Ubuntu.
  
• Installed the dependencies and issued sudo yarn develop, since i've not configured yarn/npm i've got to run it with elevated privileges and i'm presented with the following:
  

The errors thrown are based on the fact that i confugured a space for issues regarding gatsby and contenful and when the plugin tries to fetch the data based on your query it will fail.

I would like for you to do a couple of steps to see if you can get it to run in wsl.

• Remove package-lock.json and/or yarn.lock
• Issue gatsby clean to purge any stale data.
• Remove node_modules folder.
• Install the dependencies again with your package manager of choice, either npm or yarn.
• Issue gatsby develop and see if the error does not pop back.

These because if memory serves me right it could be some issue with a package.

Feel free to provide feedback so that we can close this issue or continue to work on it until we find a suitable solution.

This worked! Fantastic solution.

[baloghrebecca]

I've encountered the very same problem and I've tried out all the answers on here and it still threw the same error for me.

Turns out I had following import import { clearConfigCache } from "prettier"; in one of my files (not sure where that came from). As soon as I deleted it, it worked again.

[lsmucassi]

The issue for me is running npm install with sudo, it al went fine when I removed the .lock files and node modules, re-installed modules by just running npm install

[manavm1990]

The main culprit was: '.babelrc' I had created a custom one to work with _styled components._ In doing so, I had 'disrupted' the 'Gatsby flow'.'

The fix was to make sure I had this in '.babelrc':

"presets": [
    [
      "babel-preset-gatsby",
      {
        "targets": {
          "browsers": [
            ">0.25%",
            "not dead"
          ]
        }
      }
    ]
  ]

Well, "targets" don't necessarily matter - but must include "babel-preset-gatsby"

[kuworking]

@manavm1990 thanks! Exactly my very same problem, now my working .babelrc looks like this

{
  "plugins": ["babel-plugin-styled-components", "@babel/plugin-proposal-class-properties"],
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "targets": {
          "browsers": [">0.25%", "not dead"]
        }
      }
    ]
  ]
}