Create a gist now

Instantly share code, notes, and snippets.

ios8-transform-react-inline-elements-with-core-js-shim-bug

ios8-transform-react-inline-elements-with-core-js-shim-bug

Linked to from http://lukecod.es/2016/03/14/react-invariant-violation-minified-exception-ios8-webpack-babel/

React throws an invariant violation when using the core-js shim and the react-inline-elements transform on iOS 8.

To reproduce:

npm install
npm start

Then go to http://localhost:8080 in the iOS Simuator (8.4) and you'll see just a blank screen. If you open the Safari devtools to debug it you'll see something like this:

debugger

To fix:

Either one of these fixes the issue:

  • Remove the core-js/shim import from app.js
  • Remove the transform-react-inline-elements from plugins in the .babelrc

It is probably better to do the latter, since the transform is only for performance improvements, but the core-js/shim has functionality that your app probably needs.

{
"presets": [
"react",
"es2015"
],
"plugins": [
"transform-react-inline-elements"
]
}
dist
node_modules
import 'core-js/shim';
import React from 'react';
import DOM from 'react-dom';
DOM.render(<div>hey everybody</div>, document.getElementById('root'));
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf8"/>
</head>
<body>
<div id="root"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
{
"name": "ios8-transform-react-inline-elements-with-core-js-shim-bug",
"description": "React throws an invariant violation when using the core-js shim and the react-inline-elements transform on iOS 8.",
"version": "1.0.0",
"dependencies": {
"babel-loader": "^6.2.4",
"babel-plugin-transform-react-inline-elements": "^6.6.5",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"core-js": "^2.1.5",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"webpack": "^1.12.14"
},
"devDependencies": {
"http-server": "^0.9.0"
},
"license": "ISC",
"main": "index.js",
"private": true,
"scripts": {
"start": "webpack && http-server .",
"prod": "webpack -p --define process.env.NODE_ENV='\"production\"' && http-server ."
}
}
const webpack = require('webpack');
module.exports = {
entry: [
'./app.js'
],
output: {
filename: 'bundle.js',
path: './dist'
},
module: {
loaders: [
{
test: /\.(js|jsx|babel)$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
}
};
@longlho
longlho commented Jul 14, 2016

You'd need to include babel-polyfill as an entry point as per the note

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment