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

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

[mikeyfe6]

Problem is solved with the latest update(s):

gatsby@2.24.5 (gatsby-plugin-sharp@2.6.33) (gatsby-source-contentful@2.3.43) (gatsby-transformer-remark@2.8.34)

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

[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.