lukekarrys/ README.md

## README.md

      
    Raw
  

               README.md
            
          
    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:

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.

  
## .babelrc
{
  "presets": [
    "react",
    "es2015"
  ],
  "plugins": [
    "transform-react-inline-elements"
  ]
}

## .gitignore
dist
node_modules

## app.js
import 'core-js/shim';

import React from 'react';
import DOM from 'react-dom';

DOM.render(<div>hey everybody</div>, document.getElementById('root'));

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta charset="utf8"/>
  </head>
  <body>
    <div id="root"></div>
    <script src="dist/bundle.js"></script>
  </body>
</html>

## package.json
{
  "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 ."
  }
}

## webpack.config.js
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'
      }
    ]
  }
};
	{
	"presets": [
	"react",
	"es2015"
	],
	"plugins": [
	"transform-react-inline-elements"
	]
	}
	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'
	}
	]
	}
	};