gatsby-plugin-mdx cannot find module 'gatsby/webpack'

Question

I've just added gatsby-plugin-mdx to my gatsby plugins, but I keep getting this error when I start the project.

Error in "/Gatsby/node_modules/gatsby-plugin-mdx/gatsby-node.js": 
Cannot find module 'gatsby/webpack'

I did notice that there were some version warnings going on like the one below, but I'm not sure if that's the issue since it works as long as gatsby-plugin-mdx is not added to gatsby-config.
I'm pretty new to gatsby, and most of the plugins added were from following their tutorials, so I'm really scratching my head here.
Any ideas what's causing this and how to fix it?

warn Plugin gatsby-plugin-sass is not compatible with your 
gatsby version 3.14.6 - It requires gatsby@^4.0.0-next

Here's my package.json

{
  "name": "gatsby",
  "version": "1.0.0",
  "private": true,
  "description": "Gatsby",
  "author": "V",
  "keywords": [
    "gatsby"
  ],
  "scripts": {
    "develop": "gatsby develop",
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  },
  "dependencies": {
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "@react-three/cannon": "^4.0.1",
    "@react-three/drei": "^7.22.1",
    "@react-three/fiber": "^7.0.19",
    "classnames": "^2.3.1",
    "dayjs": "^1.10.7",
    "framer-motion": "^5.3.0",
    "gatsby": "^3.12.1",
    "gatsby-plugin-gatsby-cloud": "^3.0.0",
    "gatsby-plugin-image": "^1.12.0",
    "gatsby-plugin-layout": "^3.2.0",
    "gatsby-plugin-mdx": "^3.3.0",
    "gatsby-plugin-sass": "^5.1.1",
    "gatsby-plugin-sharp": "^3.12.0",
    "gatsby-source-filesystem": "^4.3.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "sass": "^1.43.4",
    "three": "^0.134.0"
  },
  "devDependencies": {}
}

And my gatsby-config.js

module.exports = {
  siteMetadata: {
    siteUrl: "https://www.yourdomain.tld",
    title: "Gatsby",
  },
  plugins: [
    "gatsby-plugin-gatsby-cloud",
    "gatsby-plugin-image",
    "gatsby-plugin-sharp",
    `gatsby-plugin-sass`,
    "gatsby-plugin-layout",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: `src`,
        path: `${__dirname}/src/works/`,
      },
    },
    "gatsby-plugin-mdx" // adding this creates error!
  ],
};

score 2 · Accepted Answer · answered Dec 06 '21 at 09:58

It's difficult to spot without seeing the site live but I guess that the underlying issue is the gatsby-plugin-mdx version (^3.3.0). According to the changelog, the release note is linked to Gatsby v4.3, which is not compatible with your current Gatsby since yours is 3.14.6 and it requires a major upgrade (Gatsby 4).

That said, you have two options:

Upgrade Gatsby and all the related dependencies at least until version 4
Downgrade gatsby-plugin-mdx to 2.14.0 which apparently is compatible to your current Gatsby version.

In both cases, you'll need to get rid of the package-lock.json (or yarn.lock) and reinstall the package to the needed version.

Oh thanks! I just tried upgrading everything with `yarn upgrade-interactive --latest` and it worked! — Biki Bico, Dec 07 '21 at 05:58

gatsby-plugin-mdx cannot find module 'gatsby/webpack'

1 Answers1