IE11: Object not valid as React Child

[thomascorthouts]

Description

Since a few weeks, we get more and more errors from IE11 users, the error messages are Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner}) (similar to #7003, so sorry if it should have been re-opened instead)

Few things I've found so far (trying to fix it):

• The error seems to be introduced starting from Gatsby v2.8.0
• The error while developing (I mean gatsby develop) is Promise is ‘undefined’ (-> possibly there is a new promise introduced that isn't being polyfilled)

I would like to help tackle this issue, but I could use some help to start 😅

Steps to reproduce

Visit https://www.gatsbyjs.org/ in IE11 and look at the console.

Expected result

IE11 users should be able to use a regular Gatsby website.

Actual result

The website breaks for them and React throws an error
Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner})

Environment

  System:
    OS: macOS 10.14.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  Browsers:
    Chrome: 74.0.3729.169
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.9.9 => 2.9.11
    gatsby-image: ^2.1.4 => 2.1.4
    gatsby-plugin-emotion: ^4.0.6 => 4.0.7
    gatsby-plugin-portal: ^1.0.7 => 1.0.7
    gatsby-plugin-purgecss: ^4.0.0 => 4.0.0
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
    gatsby-plugin-react-svg: ^2.1.1 => 2.1.1
    gatsby-plugin-sass: ^2.0.11 => 2.0.11
    gatsby-plugin-sentry: ^1.0.1 => 1.0.1
    gatsby-plugin-sharp: ^2.1.7 => 2.1.7
    gatsby-source-apiserver: ^2.1.2 => 2.1.2
    gatsby-source-filesystem: ^2.0.41 => 2.0.41
    gatsby-source-graphql: ^2.0.19 => 2.0.19
    gatsby-transformer-sharp: ^2.1.21 => 2.1.21
    gatsby-transformer-yaml: ^2.1.12 => 2.1.12
  npmGlobalPackages:
    gatsby-cli: 2.6.13

[thomascorthouts]

@wardpeet let me know if there is something I can do

[wardpeet]

It has been a busy week so thank you for your patience. I have it on my schedule for today.

[thomascorthouts]

No worries, I can imagine! It's more of a "happy to contribute, if it would help" 😄

[matthieuauger]

Hello, the "promise" error seen in development mode is also referenced here : #14502

[wardpeet]

seems like hot reloading being the culprit. We can add the core-js/library/es6/promise before loading hot reloading to get this fixed.

gatsby/packages/gatsby/src/utils/webpack.config.js

Lines 154 to 160 in 4e2cad1

	commons: [
	require.resolve(`event-source-polyfill`),
	`${require.resolve(
	`webpack-hot-middleware/client`
	)}?path=${getHmrPath()}`,
	directoryPath(`.cache/app`),
	],

[thomascorthouts]

@wardpeet Thanks, that could indeed be the resolution for the develop issue.
But we also get an error on production builds, being: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner}) :/ I assumed they were one and the same error, but it might be the case that they aren't...

[wardpeet]

Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner})

seems like something else. Can you try running it in develop and get us the unminified error?

[thomascorthouts]

Yeah, I'll give it a try! I get the same on https://www.gatsbyjs.org/blog:
Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7B%24%24typeof%2C%20type%2C%20key%2C%20ref%2C%20props%2C%20_owner%7D&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

I'll try to get it before the maintainer meeting

[thomascorthouts]

Interesting, in gatsby develop the error I get is:
Syntax Error File: commons.js, Line: 47228, Column: 16
which is
return key => (result, value) => {

so it seems like some missing polyfill in general

[thomascorthouts]

This seems to be fixed in the newer versions of Gatsby, so I'm going to close it for now. Thanks @wardpeet and others for fixing and contributing!

[glueCod]

@thomascorthouts if you could solve your issue with Gatsby and ie11 please share how is the approach, currently i am facing with this issue. IE11 renders a blank page with error common.js and Navigation occured.

[hohler]

@thomascorthouts I have the same issue, just updated to Gatsby 2.21.10 but I still get that error in commons.js.