gatsby-cli: Cannot find module "@mdx-js/mdx"

[ianpullinger]

Description

I recently performed an 'npm install gatsby-cli' after it was reporting being out of date. After the update, all builds (both build and develop) are failing with the following message.

verbose running command: develop
internal/modules/cjs/loader.js:895
  throw err;
  ^

Error: Cannot find module '@mdx-js/mdx'
Require stack:
- /usr/local/lib/node_modules/gatsby-cli/node_modules/gatsby-recipes/dist/transform-recipe-mdx.js
- /usr/local/lib/node_modules/gatsby-cli/node_modules/gatsby-recipes/dist/renderer/index.js
- /usr/local/lib/node_modules/gatsby-cli/node_modules/gatsby-recipes/dist/validate-steps.js
- /usr/local/lib/node_modules/gatsby-cli/node_modules/gatsby-recipes/dist/recipe-machine/index.js
- /usr/local/lib/node_modules/gatsby-cli/node_modules/gatsby-recipes/dist/graphql-server/server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:892:15)
    at Function.Module._load (internal/modules/cjs/loader.js:742:27)
    at Module.require (internal/modules/cjs/loader.js:964:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/gatsby-cli/node_modules/gatsby-recipes/dist/transform-recipe-mdx.js:12:35)
    at Module._compile (internal/modules/cjs/loader.js:1075:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1096:10)
    at Module.load (internal/modules/cjs/loader.js:940:32)
    at Function.Module._load (internal/modules/cjs/loader.js:781:14)
    at Module.require (internal/modules/cjs/loader.js:964:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/usr/local/lib/node_modules/gatsby-cli/node_modules/gatsby-recipes/dist/transform-recipe-mdx.js',
    '/usr/local/lib/node_modules/gatsby-cli/node_modules/gatsby-recipes/dist/renderer/index.js',
    '/usr/local/lib/node_modules/gatsby-cli/node_modules/gatsby-recipes/dist/validate-steps.js',
    '/usr/local/lib/node_modules/gatsby-cli/node_modules/gatsby-recipes/dist/recipe-machine/index.js',
    '/usr/local/lib/node_modules/gatsby-cli/node_modules/gatsby-recipes/dist/graphql-server/server.js'
  ]
}

verbose Transition to "initializing"

Original error:

  WorkerError: Processing <path to png file> failed
  Original error:

  - jobs-manager.ts:318 enqueueJob
    [gamedesignninja.com]/[gatsby]/src/utils/jobs-manager.ts:318:21

  - task_queues.js:93 processTicksAndRejections
    internal/process/task_queues.js:93:5

I can confirm that @mdx-js/mdx is successfully installed in the node_modules folder.

Steps to reproduce

I have performed some standard problem solving steps as follows:

remove .cache package-lock.json and node_modules
npm install

I get the feeling that there is a mismatch between versions somewhere, but not sure how best to track it down.

Environment

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.9.0 - /usr/local/bin/node
    npm: 6.14.8 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Firefox: 80.0.1
    Safari: 13.1.2
  npmPackages:
    gatsby: ^2.24.54 => 2.24.54 
    gatsby-cli: ^2.12.92 => 2.12.92 
    gatsby-image: ^2.4.17 => 2.4.17 
    gatsby-plugin-catch-links: ^2.3.2 => 2.3.11 
    gatsby-plugin-emotion: ^4.3.2 => 4.3.10 
    gatsby-plugin-feed-mdx: ^1.0.1 => 1.0.1 
    gatsby-plugin-google-analytics: ^2.3.2 => 2.3.13 
    gatsby-plugin-google-tagmanager: ^2.3.3 => 2.3.11 
    gatsby-plugin-manifest: ^2.4.28 => 2.4.28 
    gatsby-plugin-mdx: ^1.2.38 => 1.2.38 
    gatsby-plugin-offline: ^3.2.27 => 3.2.27 
    gatsby-plugin-react-helmet: ^3.3.2 => 3.3.10 
    gatsby-plugin-robots-txt: ^1.5.1 => 1.5.1 
    gatsby-plugin-sharp: ^2.6.32 => 2.6.32 
    gatsby-plugin-sitemap: ^2.4.12 => 2.4.12 
    gatsby-remark-copy-linked-files: ^2.3.14 => 2.3.14 
    gatsby-remark-external-links: 0.0.4 => 0.0.4 
    gatsby-remark-images: ^3.3.29 => 3.3.29 
    gatsby-remark-prismjs: ^3.5.11 => 3.5.11 
    gatsby-remark-reading-time: ^1.1.0 => 1.1.0 
    gatsby-remark-smartypants: ^2.3.2 => 2.3.10 
    gatsby-source-filesystem: ^2.3.28 => 2.3.28 
    gatsby-transformer-sharp: ^2.5.14 => 2.5.14 
  npmGlobalPackages:
    gatsby-cli: 2.12.92

[LekoArts]

Thanks for the issue, my colleague @jamo was able to reproduce it by installing gatsby-cli freshly in a new Docker instance.

[jamo]

A quick Dockerfile to repro this:

FROM node:13
RUN mkdir test; cd test; npm i -g gatsby-cli; \
  gatsby new my-gatsby-project | cat ; \
  cd /test/my-gatsby-project ; \
  gatsby develop

Looks like the development server starts just fine despite logging these errors.

[lxnd77]

I am having this same issue. Gatsby develop still goes on to serve to localhost:8000, but on that page all I can see is Loading (Static query). Gatsby build and develop both work on Windows with no files changed.

[Twentyone8]

I am having the same issue. As with @jamo, development server starts fine and all works. Application has the basic starter StaticQuery for site metadata which works, but no other application specific queries.

[TotomInc]

I have temporarily downgraded to [email protected] until this bug is fixed.

[mikeyfe6]

Problem is solved with the latest update(s):

[email protected]
([email protected])
([email protected])
([email protected])

delete your cache
gatsby clean

Be sure to also update your gatsby-cli: npm i -g gatsby-cli

delete your node_modules & packages for a clean install
rm -rf node_modules package-lock.json

last but not least
npm install --save

and test your building proces
npm run develop

[lxnd77]

Will try the fix today, mine was fixed by downgrading to 2.24.37 as @TotomInc mentioned, and also removing all static queries

[h20hb]

I had the same issue and above mentioned update steps solved the problem. Thanks!!

[Twentyone8]

Error fixed with @mikeyfe6 solution. Thanks

[lpmi-13]

came here after trying to run the template in https://github.com/gatsbyjs/gatsby-starter-default, and encountering the same issue. Can confirm updating the gatsby-cli resolves it.

[memotux]

Follow @mikeyfe6 solution and the Error is fixed.

[ianpullinger]

Can confirm that as confirmed by others, the solution from @mikeyfe6 fixed the error. Ticket to be closed, many thanks.

[pevers]

I ran into this even with an updated Gatsby CLI:

Gatsby CLI version: 2.12.113
Gatsby version: 2.24.91
  Note: this is the Gatsby version for the site at: /Users/petere/projects/test-gatsby

I ran npm install @mdx-js/mdx --save to solve it.

[HannahManfredi]

Hallelujah! Thanks for leaving all the carrots, everyone. I had the same issue, did a combo of the above and it's working now :)