xcatliu/react-ie8

Exception thrown and not caught

xcatliu opened this issue · 8 comments

Exception thrown and not caught

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

Babel might transform your source to Object.defineProperty, be careful to use babel if you want to support ie8.
See reduxjs/react-redux#227

/**
 * 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

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.