babel: transform-react-inline-elements causes duplicate react error

In our application, with production optimizations we have found that the babel-plugin-transfor-react-inline-elements to cause

Invariant Violation: ReactDOM.render(): Invalid component element. This may be caused by unintentionally loading two independent copies of React.

I also found this writeup that led me to the same conclusion: http://lukecod.es/2016/03/14/react-invariant-violation-minified-exception-ios8-webpack-babel/

Input Code

Gist by Luke Karrys

Babel Configuration (.babelrc, package.json, cli command)

^See gist.

This is my working production .babelrc. Adding in the transfor-react-inline-elements with or without the babel-polyfill causes the error.

{
  "presets": [
    "es2017",
    "es2016",
    ["es2015", {"modules": false}],
    "react",
    "stage-0"
  ],
  "plugins": [
    "transform-react-remove-prop-types",
    "transform-react-constant-elements",
    // "transform-react-inline-elements", // source of dup react error

    "babel-relay-plugin-loader",
    "flow-react-proptypes",
    "transform-flow-strip-types",
    "lodash",
    ["react-remove-properties", {"properties": ["data-test"]}],      
    ["transform-runtime",
      {
        "helpers": false,
        "polyfill": false,
        "regenerator": true
      }
    ],
    "react-hot-loader/babel"
  ]
}

Expected Behavior

Doesn’t cause the duplicate react error.

Current Behavior

Causes the duplicate react error.

Context

Production react application optimization.

Your Environment

software	version
Babel	6.23.1
node	7.5.0
yarn	0.20.3
Operating System	OSX 10.12.3, Ubuntu 14.04 (circleci)
webpack	2.2.1

About this issue

Original URL
State: open
Created 7 years ago
Reactions: 6
Comments: 30 (9 by maintainers)

Commits related to this issue

fix_v1_ui_in_ie11 https://github.com/babel/babel/issues/5357 — committed to assembl/assembl by swergas 7 years ago
fix_v1_ui_in_ie11 https://github.com/babel/babel/issues/5357 — committed to assembl/assembl by swergas 7 years ago

Most upvoted comments

Same issue for me. But I was able to reproduce this issue only on IE11. Chrome, Firefox, Edge 14 work fine

bogdan-bodnaruk on Mar 2, 2017

@jaden-chen if you are using runtime specific code then you can avoid the potential hoisting issue by moving require('babel-polyfill') like so

Make a new file foo

/* WARNING: Do not add imports that use es6 runtime features above this export */
export default !global._babelPolyfill ? require('babel-polyfill') : null;

In the entry

import 'foo';
import ReactDOM from 'react-dom';

I tested this in the reproduction and it does fix the issue. It avoids having to require both babel-polyfill and symbol for your situation above and works in IE11 for me.

vinnymac on Jul 26, 2017

with or without the babel-polyfill causes the error

rosskevin on Mar 7, 2017

@gaearon yea looks like you are right and using the polyfill does in fact fix the issue in the reproduction I made, which means it isn’t a good reproduction. I will have to think on this some more. If anyone has any additional details feel free to add them to the reproduction repository. It could be that dependencies have changed and alleviated this issue entirely, but I don’t have any proof. Might need to go back to old dependencies just to get a good test since this was posted in February and a lot has been released since then.

vinnymac on May 27, 2017

It would really help if somebody posted a ready-to-run project reproducing this. I was going to take a look but copy-pasting gists into a project and hoping that it will reproduce is unfortunately not appealing enough so I’ll pass this time. 😞 When you provide a project that’s ready to npm install and npm start the chances that somebody will try to fix it are significantly higher. Thanks!

gaearon on May 27, 2017