Invalid Hook Call when using gatsby-starter-mdx-basic

[Titou325]

Description

It seems that creating a new project with gatsby-plugin-mdx always throws an Error: Invalid hook call. when using the dev server.

Steps to reproduce

Clone MDX starter, start dev server and browse to http://localhost:8000

gatsby new my-mdx-starter https://github.com/ChristopherBiscardi/gatsby-starter-mdx-basic
cd my-mdx-starter/
gatsby develop

Expected result

The page should be accessible.

Actual result

The following error is encountered:

react.development.js:1465 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1465)
    at Object.useContext (react.development.js:1473)
    at useMDXComponents (esm.js:120)
    at esm.js:151
    at renderWithHooks (react-dom.development.js:14803)
    at updateForwardRef (react-dom.development.js:16816)
    at beginWork (react-dom.development.js:18645)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at scheduleUpdateOnFiber (react-dom.development.js:21188)
    at updateContainer (react-dom.development.js:24373)
    at react-dom.development.js:24758
    at unbatchedUpdates (react-dom.development.js:21903)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
    at render (react-dom.development.js:24840)
    at app.js:115
resolveDispatcher @ react.development.js:1465
useContext @ react.development.js:1473
useMDXComponents @ esm.js:120
(anonymous) @ esm.js:151
renderWithHooks @ react-dom.development.js:14803
updateForwardRef @ react-dom.development.js:16816
beginWork @ react-dom.development.js:18645
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
beginWork$1 @ react-dom.development.js:23203
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
scheduleUpdateOnFiber @ react-dom.development.js:21188
updateContainer @ react-dom.development.js:24373
(anonymous) @ react-dom.development.js:24758
unbatchedUpdates @ react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
render @ react-dom.development.js:24840
(anonymous) @ app.js:115
setTimeout (async)
(anonymous) @ ready.js:37
(anonymous) @ app.js:114
Promise.then (async)
(anonymous) @ app.js:107
Promise.then (async)
(anonymous) @ app.js:24
./.cache/app.js @ app.js:17
__webpack_require__ @ bootstrap:789
fn @ bootstrap:100
0 @ page-2.mdx:15
__webpack_require__ @ bootstrap:789
(anonymous) @ bootstrap:856
(anonymous) @ bootstrap:856
index.js:2177 The above error occurred in the <LocationProvider> component:
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:123)
    in Root (at root.js:131)
    in MDXProvider (at wrap-root-element.js:65)
    in MDXScopeProvider (at wrap-root-element.js:64)
    in Component (created by Component)
    in Component (at wrap-root-element.js:72)
    in StaticQueryStore (at root.js:138)
    in _default (at app.js:115)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Environment

  System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.3.2 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.11.3 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.6.4
  Browsers:
    Chrome: 85.0.4183.102
    Edge: Spartan (44.19041.423.0), Chromium (85.0.564.51)
  npmPackages:
    gatsby: ^2.13.50 => 2.24.63 
    gatsby-image: ^2.2.8 => 2.4.19 
    gatsby-plugin-manifest: ^2.2.4 => 2.4.30 
    gatsby-plugin-mdx: ^1.0.0 => 1.2.40 
    gatsby-plugin-offline: ^2.2.4 => 2.2.10 
    gatsby-plugin-react-helmet: ^3.1.3 => 3.3.11 
    gatsby-plugin-sharp: ^2.2.9 => 2.6.36 
    gatsby-source-filesystem: ^2.1.8 => 2.3.30 
    gatsby-transformer-sharp: ^2.2.5 => 2.5.15 
  npmGlobalPackages:
    gatsby-cli: 2.12.99

Notes

gatsby build seems to work without issue.
Adding gatsby-plugin-layout and configuring it to be the same template as the one used on posts seems to solve the problem, but it is fiddly (set the layout component to the component used in createPage).
I have tried resetting cache/npm modules/package-lock.json/fiddling with package versions, without any luck. All starter packages relying on gatsby-plugin-mdx seem to be broken. The only exception i could find is gatsby-gitbook-starter which works, but disabling the layout plugin yields the same error.

Thanks a lot for your time

[ascorbic]

Hi. Thanks for the report. The problem here is that multiple versions of React have been installed, and it is using a different one in each place. This is an issue that we are aware of and actively working on a fix which should be ready soon. You can track the underlying issue here: #19827

I'm going to close this as a duplicate, because it is the same underlying cause even if the symptom is different.