[v2] IE11 throws Objects are not valid as a React child

[alexandernanberg]

Description

When visiting sites using v2 in IE11 React throws an error

Steps to reproduce

Visit https://next.gatsbyjs.org in IE11 and check the console

Expected result

No errors

Actual result

React throws this error;

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

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
    Yarn: 1.9.2 - /usr/local/bin/yarn
    npm: 5.6.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
  Browsers:
    Chrome: 68.0.3440.84
    Firefox: 61.0.1
    Safari: 11.1.2
  npmPackages:
    gatsby: ^2.0.0-beta.64 => 2.0.0-beta.67 
    gatsby-plugin-catch-links: ^2.0.2-beta.5 => 2.0.2-beta.5 
    gatsby-plugin-feed: next => 2.0.0-beta.4 
    gatsby-plugin-glamor: next => 2.0.0-beta.3 
    gatsby-plugin-google-analytics: next => 2.0.0-beta.3 
    gatsby-plugin-manifest: next => 2.0.2-beta.3 
    gatsby-plugin-netlify: next => 2.0.0-beta.5 
    gatsby-plugin-nprogress: next => 2.0.0-beta.4 
    gatsby-plugin-react-helmet: next => 3.0.0-beta.4 
    gatsby-plugin-sharp: next => 2.0.0-beta.7 
    gatsby-plugin-twitter: next => 2.0.0-beta.3 
    gatsby-remark-autolink-headers: next => 2.0.0-beta.5 
    gatsby-remark-code-repls: next => 2.0.0-beta.4 
    gatsby-remark-copy-linked-files: next => 2.0.0-beta.3 
    gatsby-remark-embed-snippet: next => 3.0.0-beta.3 
    gatsby-remark-images: next => 2.0.1-beta.9 
    gatsby-remark-prismjs: next => 3.0.0-beta.5 
    gatsby-remark-responsive-iframe: next => 2.0.0-beta.3 
    gatsby-remark-smartypants: next => 2.0.0-beta.3 
    gatsby-source-filesystem: next => 2.0.1-beta.10 
    gatsby-transformer-remark: next => 2.1.1-beta.5 
    gatsby-transformer-sharp: next => 2.1.1-beta.6 

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[anantoghosh]

This does not occur in the starter project and another project which I'm working on.
Is this gatsbyjs.org specific? Or do you have any other repo/site which has this issue?

[alexandernanberg]

No it's not gatsbyjs.org specific because I first noticed it when migrating reactjs.org (preview link) to v2. Here is the repo for that if you need it.

My best guess would be that polyfills aren't loaded correctly, like the Symbol polyfill which is required for React. Think I've seen this error before on a non-gatsby site and adding the correct polyfills solved that. Also I think the reason why you don't get any errors is because you might not use fragments or return arrays?

Here is an issue that might help facebook/react#8379

[anantoghosh]

/cc @pieh @KyleAMathews @m-allanson

[stripeyjumper]

I worked around this by adding the babel polyfills as a webpack entry point in gatsby-node.js:

exports.onCreateWebpackConfig = ({
  stage,
  getConfig,
  actions: { replaceWebpackConfig }
}) => {
  switch (stage) {
    case 'build-javascript':
      // We want to include the babel polyfills before any application code,
      // so we're inserting it as an additional entry point.  Gatsby does not allow
      // this in "setWebpackConfig", so we have to use "replaceWebpackConfig"
      const config = getConfig();

      const app =
        typeof config.entry.app === 'string'
          ? [config.entry.app]
          : config.entry.app;

      config.entry.app = ['@babel/polyfill', ...app];
      replaceWebpackConfig(config);
  }
};

[KyleAMathews]

I just did a build and the Symbol polyfill is in there

[alexandernanberg]

Hmm could it be Map or Set that is missing then? Also noticed that the site doesn't work at all in IE11 when you run gatsby develop, same error though

[KyleAMathews]

From reading facebook/react#8379 (comment) one possibility is that the polyfill is loading after React which could be happening since we're relying on Babel 7's polyfilling which adds polyfill imports as they're needed — which wouldn't actually be working since we don't run React through Babel.

Ah yeah, confirmation babel/babel#7335 (comment)

So we need to manually add the necessary polyfills to ensure they're run first.

[KyleAMathews]

One way to do this is to a) add the polyfills directly at the top of production-app.js (our entry) and then b) in our webpack config, look at what browsers people are supporting — if they're not supporting ie11 or below then we remove those polyfills.

Thoughts?

Anyone want to tackle this?

[alexandernanberg]

How would we be able to remove them in the webpack config though 🤔

I suppose you mean like this

// production-app.js
import '@babel/polyfill'
// or just the necessary polyfills
import 'core-js/es6/set'
import 'core-js/es6/map'

Then AFAIK there is no way to remove them, I could be wrong though

Huh strange, always though Symbol was needed for React but that might not the case https://reactjs.org/docs/javascript-environment-requirements.html

I could take this on, but unfortunately I won't have time until the weekend-ish. So if anyone else wanna grab this feel free to do so!

[KyleAMathews]

We'd conditionally add https://webpack.js.org/plugins/ignore-plugin/

[alexandernanberg]

Oh cool, didn't know you could do that!

[KyleAMathews]

It's a neat trick :-)

[stripeyjumper]

If the babel settings for babel-preset-env were changed to useBuiltIns: 'entry', would that cause babel to include the polyfills according to the browserslist settings?

That's what the docs suggest, but I haven't tried it.
https://babeljs.io/docs/en/next/babel-preset-env.html#usebuiltins