gatsby: [gatsby-plugin-mdx] getting `Cannot read property 'reactstandinkey' of null` from react-hot-loader when i accidentally render `undefined` to MDXRenderer from gatsby-plugin-mdx

Description

i’m starting to get these a lot:

react-hot-loader.development.js:1229 Uncaught TypeError: Cannot read property '__reactstandin__key' of null
    at isProxyType (react-hot-loader.development.js:1229)
    at resolveProxy (react-hot-loader.development.js:1766)
    at resolveSimpleType (react-hot-loader.development.js:1782)
    at Object.React$$1.createElement (react-hot-loader.development.js:2813)
    at MDXRenderer (mdx-renderer.js:24)
    at renderWithHooks (react-dom.development.js:12939)
    at mountIndeterminateComponent (react-dom.development.js:15021)
    at beginWork (react-dom.development.js:15626)
    at performUnitOfWork (react-dom.development.js:19313)
    at workLoop (react-dom.development.js:19353)
    at HTMLUnknownElement.callCallback (react-dom.development.js:150)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:200)
    at invokeGuardedCallback (react-dom.development.js:257)
    at replayUnitOfWork (react-dom.development.js:18579)
    at renderRoot (react-dom.development.js:19469)
    at performWorkOnRoot (react-dom.development.js:20343)
    at performWork (react-dom.development.js:20255)
    at performSyncWork (react-dom.development.js:20229)
    at requestWork (react-dom.development.js:20098)
    at scheduleWork (react-dom.development.js:19912)
    at Object.enqueueSetState (react-dom.development.js:11170)
    at LocationProvider../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:335)
    at index.js:104


index.js:2177 The above error occurred in the <MDXRenderer> component:
    in MDXRenderer (at pages/index.js:81)
    in section (created by Context.Consumer)
	// ...


React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.

i think this is new? and i searched and didnt find a related issue and so i am filing this.

after some investigation i think i found the cause. see below

Steps to reproduce

i think this happens when you accidentally pass undefined to MDXRenderer from gatsby-plugin-mdx. the error message is waaaay unintuitive and should be improved.

Expected result

we should have a more descriptive error.

Environment


  System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
    Yarn: 1.17.0 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 76.0.3809.100
    Firefox: 67.0.4
    Safari: 12.1.2
  npmPackages:
    gatsby: ^2.13.50 => 2.13.50 
    gatsby-plugin-manifest: ^2.2.4 => 2.2.4 
    gatsby-theme: ^0.0.6 => 0.0.6 
  npmGlobalPackages:
    gatsby-theme-workspace: 1.0.0
    gatsby-theme: 0.0.6

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 27 (5 by maintainers)

Links to this issue

Gatsby image mystery - Stack Overflow

Commits related to this issue

fix(gatsby-plugin-mdx): Raise error if MDXRenderer received undefined We should validate that MDXRenderer receives a transpiled MDX string. If we don't, we should error out with a useful error messag... — committed to johno/gatsby by johno 5 years ago

Most upvoted comments

Well this is awkward… See if wrapping a single child instead of multiple children in the <ThemeProvider> fixes the issue like it did for me.

+23

CRNRSTD on Aug 12, 2019

+1 for styled-components’ ThemeProvider.

CRNRSTD on Aug 10, 2019

I faced the same error. The following two steps helped me:

Remove .cache folder
Restart npm run develop

The issue seems to be related to not invalidating import cache by gatsby.

egorzekov on Aug 24, 2019

Same issue here with <ThemeProvider theme={theme}> not using mdx

MWalid on Aug 12, 2019

How I got the error:

<>
    <GlobalStyle />
    <ThemeProvider theme={{ mode: "dark" }}>
      {children}
    </ThemeProvider>
  </>

Quickfix:

<>
    <GlobalStyle />
    <ThemeProvider theme={{ mode: "dark" }}>
      <>{children}</> // Wrap with a fragment/div
    </ThemeProvider>
</>

It seems that this issue is caused by <ThemeProvider> having multiple children.

However, in the docs

ThemeProvider returns its children when rendering, so it must only wrap a single child node as it may be used as the root of the render() method.

jacklaurencegaray on Aug 16, 2019

This error was fixed for me when I realized I was not importing with brackets - import { component } from ‘./component’.

isaacdpierce on Sep 27, 2019

searchers using react-hot-loader may find themselves here, so:

this is almost definitely because:

you either rendered an array of children (instead of a fragment) or
you rendered an undefined component

to more easily debug this, turn off react-hot-loader and get react’s native error message, which will probably tell you which component is undefined

shrugs on Sep 5, 2019

Awesome @CRNRSTD ! Your comment showed up after publishing the example 👆 😂

But maybe the problem is that the standard React error is swallowed as @johno mentioned? Impossible to debug this. Just luck that someone know the requirements for using ThemeProvider by styled-components in this case 😎

torleifhalseth on Aug 13, 2019

Hi @johno ! Thanks for looking at this problem. I reproduced the error with styled-components in codesandbox here https://codesandbox.io/embed/gatsby-starter-default-g9xov. By wrapping all children inside ThemeProvider in a single child you solve this issue as. Thanks @CRNRSTD 🙏🏻