xcatliu / react-ie8

Make your React app work in IE8
http://react-ie8.xcatliu.com/
998 stars 162 forks source link

Exception thrown and not caught #2

Closed xcatliu closed 8 years ago

xcatliu commented 8 years ago

Same issue: https://github.com/facebook/react/issues/3682

xcatliu commented 8 years ago

Related issue https://github.com/rackt/react-redux/issues/133

xcatliu commented 8 years ago

Related to https://phabricator.babeljs.io/T2322

xcatliu commented 8 years ago

Related to https://github.com/rackt/react-redux/issues/227

xcatliu commented 8 years ago

Object.defineProperty should be wrapped in a try catch statement, like react/src/shared/utils/canDefineProperty.js

xcatliu commented 8 years ago

Babel might transform your source to Object.defineProperty, be careful to use babel if you want to support ie8. See https://github.com/rackt/react-redux/issues/227

xcatliu commented 8 years ago
/**
 * CANNOT use `import` to import `es5-shim`,
 * because `import` will be transformed to `Object.defineProperty` by babel,
 * `Object.defineProperty` doesn't exists in IE8,
 * (but will be polyfilled after `require('react-ie8')` executed).
 */
/**
 * CANNOT use `import` to import `react` or `react-dom`,
 * because `import` will run `react` before `require('react-ie8')()`.
 */
Wind4 commented 8 years ago

Write ES6 code

import 'es5-shim';
import 'es5-shim/es5-sham';
import 'console-polyfill';
import 'es6-promise';
import 'fetch-ie8';

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

ReactDOM.render(
  <div className="root">Hello</div>,
  document.getElementById('root'),
);

the babel will transform to:

'use strict';

require('es5-shim');
require('es5-shim/es5-sham');
require('console-polyfill');
require('es6-promise');
require('fetch-ie8');

var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

_reactDom2.default.render(_react2.default.createElement(
  'div',
  { className: 'root' },
  'Hello'
), document.getElementById('root'));

So, we can use the 'import' syntax.