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

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"
  }
}

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 23
  • Comments: 47 (5 by maintainers)

Commits related to this issue

Most upvoted comments

Hi,

I have resolved the issue anyways.

Thanks

@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. cold_pen_wsl_1
  • 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: cold_pen_wsl_2

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.

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

deleted my .cache folder - worked like a charm.

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

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

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?

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.

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.

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"

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.

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

Hi, for those still looking for a fix for that issue, and after trying 300000 solutions, what worked for me is to “yarn”, let yarn install the yarn.lock, then gatsby develop again. Sounds like yarn is a prerequisite after all…

@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"]
        }
      }
    ]
  ]
}

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

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!

@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. cold_pen_wsl_1
  • 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: cold_pen_wsl_2

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

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.

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`,
      },
    },
  ],

@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!