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

[sw-yx]

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

[pierrenel]

Same here +1

[sw-yx]

@pierrenel do you see the fix? just make sure you're not rendering undefined. or if you can provide further investigation, please help so that @ChristopherBiscardi has more info to work with

[pierrenel]

ah no - I didn't see the fix - but I'm not using mdx, this is a fresh project using styled components - I get the error when trying to wrap <ThemeProvider theme={theme}> around the outermost level components in layout.js - theme is definitely a JS object though. I also get the same error when trying to add a global style object... super weird. I can give anyone access to the repo if they want to see?

[CRNRSTD]

+1 for styled-components' ThemeProvider.

[freiksenet]

CC @johno

[MWalid]

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

[MWalid]

In my case the error is:

Cannot read property '__reactstandin__key' of undefined

[johno]

I'll open up a PR/fix for MDX's side today, though this is something that happens in other circumstances as well. I've seen this occur more generally, if you pass null/undefined to React.createElement at the custom pragma level. It _appears_ like the standard React error is swallowed:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Can anyone reproduce the styled-components error and toss it into a repo or codesandbox? I haven't seen it occur there before.

[CRNRSTD]

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.

[thalseth]

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 🙏🏻

[thalseth]

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 😎

[MWalid]

Thank you @CRNRSTD, you addressed the issue, and a little <Fragment /> solved this error for me.

[ZQ-jhon]

same issue in my electron application.

Node v12.3.0
electron v6.0.2
npm v6.9.0
"react-hot-loader": "v4.12.11",
"react": "16.9.0",

[jacklaurencegaray]

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.

[kwangkim]

In my case, old react-helmet caused this error.
By updating it to 5.2.1, I could remove it.

[zubayrrr]

same error in a simple gatsby site

TypeError: Cannot read property '__reactstandin__key' of undefined

[egorzekov]

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

1. Remove .cache folder
2. Restart npm run develop

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

[ghost]

May or may not be related but I was getting this error after having not exported the component before using it.

[shrugs]

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

this is almost definitely because:
1) you either rendered an array of children (instead of a fragment) or
2) 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

[cbillowes]

In my case the error is:

Cannot read property '__reactstandin__key' of undefined

I noticed that only half of my posts are rendered when I run develop even if the .cache is cleared. I am encoding URLs in markdown and those posts throw that error.

  "dependencies": {
    "bootstrap": "^4.3.1",
    "clipboard": "^2.0.4",
    "gatsby": "2.10.0",
    "gatsby-image": "2.2.1",
    "gatsby-plugin-catch-links": "2.1.5",
    "gatsby-plugin-feed": "2.0.9",
    "gatsby-plugin-google-analytics": "2.1.12",
    "gatsby-plugin-lodash": "3.1.5",
    "gatsby-plugin-manifest": "2.2.13",
    "gatsby-plugin-netlify": "^2.1.10",
    "gatsby-plugin-nprogress": "2.1.4",
    "gatsby-plugin-offline": "2.2.9",
    "gatsby-plugin-react-helmet": "3.1.5",
    "gatsby-plugin-sass": "^2.1.12",
    "gatsby-plugin-sharp": "2.2.1",
    "gatsby-plugin-sitemap": "2.2.9",
    "gatsby-plugin-twitter": "2.1.4",
    "gatsby-remark-autolink-headers": "2.1.8",
    "gatsby-remark-copy-linked-files": "2.1.13",
    "gatsby-remark-embed-gist": "^1.1.9",
    "gatsby-remark-embed-youtube": "0.0.7",
    "gatsby-remark-emojis": "^0.3.2",
    "gatsby-remark-external-links": "0.0.4",
    "gatsby-remark-images": "3.1.0",
    "gatsby-remark-prismjs": "3.3.9",
    "gatsby-remark-responsive-iframe": "2.2.10",
    "gatsby-source-filesystem": "2.1.0",
    "gatsby-transformer-remark": "2.5.0",
    "gatsby-transformer-sharp": "2.2.0",
    "jquery": "^3.4.1",
    "lodash": "^4.17.15",
    "markdown-spellcheck": "^1.3.1",
    "moment": "^2.24.0",
    "node-sass": "^4.12.0",
    "prismjs": "^1.17.1",
    "react": "^16.9.0",
    "react-disqus-comments": "^1.4.0",
    "react-dom": "^16.9.0",
    "react-helmet": "^5.2.1",
    "react-moment": "^0.9.2",
    "react-share": "^3.0.1",
    "react-twitter-widgets": "^1.7.1",
    "reactstrap": "^8.0.1",
    "url-join": "^4.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "babel-core": "^6.26.3",
    "babel-jest": "^24.9.0",
    "babel-preset-gatsby": "^0.2.11",
    "cli-glob": "^0.1.0",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "eslint": "^6.2.2",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-prettier": "^6.1.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.14.3",
    "gh-pages": "^2.1.1",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^24.9.0",
    "prettier": "^1.18.2",
    "react-test-renderer": "^16.9.0",
    "remark-cli": "^7.0.0",
    "remark-preset-lint-recommended": "^3.0.3",
    "stylefmt": "^6.0.3",
    "stylelint": "^10.1.0",
    "stylelint-config-standard": "^18.3.0",
    "write-good": "^1.0.2"
  },

Edit

I downgraded gatsby-plugin-manifest from 2.2.13 to 2.2.0 (a previously working version of the plugin on my site) and all my posts render again. I also no longer get the react-hot-reloader error.

[meronek]

I also get this error as soon as I use anything from react-stripe-elements. Any ideas on what to do?

[gyrad]

I also get this error as soon as I use anything from react-stripe-elements. Any ideas on what to do?

Had the same issue with react-stripe-elements. Check within your Elements component tags. It should only contain the component with the injectStripe HOC.

[isaacdpierce]

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

[PSalaun]

@isaacdpierce I second this, ran into this issue when using sanity's block-content-to-react and Theme UI, which also relies on a <ThemeProvider>. The error came from a named import instead of a default one.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!