Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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

@charlesbodman

You just saved a lot of headache for me.

Had the exact same issue with different ios builds not booting with cordova.

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