[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 #16481

swyxio · 2019-08-09T04:32:55Z

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

The text was updated successfully, but these errors were encountered:

pierrenel · 2019-08-09T14:49:49Z

Same here +1

swyxio · 2019-08-09T15:45:02Z

@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 · 2019-08-09T16:22:48Z

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 · 2019-08-10T10:43:50Z

+1 for styled-components' ThemeProvider.

freiksenet · 2019-08-12T06:47:37Z

CC @johno

MWalid · 2019-08-12T07:56:57Z

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

MWalid · 2019-08-12T07:59:53Z

In my case the error is:

Cannot read property '__reactstandin__key' of undefined

johno · 2019-08-12T13:56:10Z

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.

We should validate that MDXRenderer receives a transpiled MDX string. If we don't, we should error out with a useful error message. This is related to gatsbyjs#16481, but doesn't completely solve all causes. An additional PR will follow later.

CRNRSTD · 2019-08-12T19:21:35Z

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.

torleifhalseth · 2019-08-13T07:23:31Z

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

torleifhalseth · 2019-08-13T07:27:20Z

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 · 2019-08-13T15:51:31Z

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

ZQ-jhon · 2019-08-15T18:36:44Z

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 · 2019-08-16T13:19:41Z

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 · 2019-08-22T18:31:57Z

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

zubayrrr · 2019-08-24T19:03:28Z

same error in a simple gatsby site

TypeError: Cannot read property '__reactstandin__key' of undefined

egorzekov · 2019-08-24T20:05:17Z

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.

lisandropat · 2019-08-30T20:32:50Z

react-tabs for me using Gatsby. Tried removing .cache, reinstalling and updating packages, using <> and

within {children}. Nothing.

ghost · 2019-08-31T14:59:38Z

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

shrugs · 2019-09-05T11:57:30Z

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

cbillowes · 2019-09-07T01:08:52Z

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 · 2019-09-08T11:48:45Z

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

gyrad · 2019-09-24T07:04:02Z

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 · 2019-09-27T16:42:27Z

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

PSalaun · 2019-10-16T19:47:17Z

@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 · 2019-11-06T17:27:34Z

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 · 2019-11-17T17:27:35Z

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!

swyxio changed the title ~~getting Cannot read property '__reactstandin__key' of null from react-hot-loader~~ getting Cannot read property '__reactstandin__key' of null from react-hot-loader when i accidentally render undefined to MDXRenderer from gatsby-plugin-mdx Aug 9, 2019

freiksenet added topic: MDX labels Aug 12, 2019

johno self-assigned this Aug 12, 2019

johno added this to To prioritize in Themes Roadmap via automation Aug 12, 2019

johno moved this from To prioritize to In progress in Themes Roadmap Aug 12, 2019

johno mentioned this issue Aug 12, 2019

fix(gatsby-plugin-mdx): Raise error if MDXRenderer receives undefined or null #16555

Merged

gatsbot bot added the stale? Issue that may be closed soon due to the original author not responding any more. label Nov 6, 2019

gatsbot bot closed this as completed Nov 17, 2019

Themes Roadmap automation moved this from In progress to Done Nov 17, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[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 #16481

[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 #16481

swyxio commented Aug 9, 2019 •

edited

pierrenel commented Aug 9, 2019

swyxio commented Aug 9, 2019

pierrenel commented Aug 9, 2019 •

edited

CRNRSTD commented Aug 10, 2019

freiksenet commented Aug 12, 2019

MWalid commented Aug 12, 2019 •

edited

MWalid commented Aug 12, 2019

johno commented Aug 12, 2019

CRNRSTD commented Aug 12, 2019 •

edited

torleifhalseth commented Aug 13, 2019 •

edited

torleifhalseth commented Aug 13, 2019

MWalid commented Aug 13, 2019

ZQ-jhon commented Aug 15, 2019

jacklaurencegaray commented Aug 16, 2019 •

edited

kwangkim commented Aug 22, 2019

zubayrrr commented Aug 24, 2019 •

edited

egorzekov commented Aug 24, 2019 •

edited

lisandropat commented Aug 30, 2019

ghost commented Aug 31, 2019

shrugs commented Sep 5, 2019

cbillowes commented Sep 7, 2019 •

edited

meronek commented Sep 8, 2019

gyrad commented Sep 24, 2019 •

edited

isaacdpierce commented Sep 27, 2019

PSalaun commented Oct 16, 2019 •

edited

gatsbot bot commented Nov 6, 2019

gatsbot bot commented Nov 17, 2019

[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 #16481

[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 #16481

Comments

swyxio commented Aug 9, 2019 • edited

Description

Steps to reproduce

Expected result

Environment

pierrenel commented Aug 9, 2019

swyxio commented Aug 9, 2019

pierrenel commented Aug 9, 2019 • edited

CRNRSTD commented Aug 10, 2019

freiksenet commented Aug 12, 2019

MWalid commented Aug 12, 2019 • edited

MWalid commented Aug 12, 2019

johno commented Aug 12, 2019

CRNRSTD commented Aug 12, 2019 • edited

torleifhalseth commented Aug 13, 2019 • edited

torleifhalseth commented Aug 13, 2019

MWalid commented Aug 13, 2019

ZQ-jhon commented Aug 15, 2019

jacklaurencegaray commented Aug 16, 2019 • edited

kwangkim commented Aug 22, 2019

zubayrrr commented Aug 24, 2019 • edited

egorzekov commented Aug 24, 2019 • edited

lisandropat commented Aug 30, 2019

ghost commented Aug 31, 2019

shrugs commented Sep 5, 2019

cbillowes commented Sep 7, 2019 • edited

meronek commented Sep 8, 2019

gyrad commented Sep 24, 2019 • edited

isaacdpierce commented Sep 27, 2019

PSalaun commented Oct 16, 2019 • edited

gatsbot bot commented Nov 6, 2019

gatsbot bot commented Nov 17, 2019

[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 #16481

[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 #16481

swyxio commented Aug 9, 2019 •

edited

pierrenel commented Aug 9, 2019 •

edited

MWalid commented Aug 12, 2019 •

edited

CRNRSTD commented Aug 12, 2019 •

edited

torleifhalseth commented Aug 13, 2019 •

edited

jacklaurencegaray commented Aug 16, 2019 •

edited

zubayrrr commented Aug 24, 2019 •

edited

egorzekov commented Aug 24, 2019 •

edited

cbillowes commented Sep 7, 2019 •

edited

gyrad commented Sep 24, 2019 •

edited

PSalaun commented Oct 16, 2019 •

edited