Issues with IE11

This issue has already been asked previously. I will be as detailed as I can to provide enough information about the dev setup. Here I will paste one experiment with create-react-app, but I have tried this with a custom webpack/react project, and the result is the same.

Below is a simple create-react-app index.js, that I think most are familiar with:

import 'react-app-polyfill/ie11';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

and here is the App.js

import React, { Component } from 'react';
import "react-reflex/styles.css";
import { ReflexContainer, ReflexElement, ReflexSplitter } from "react-reflex";
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <ReflexContainer orientation="vertical" windowResizeAware={true}>
            <ReflexElement minSize={300} flex={0.2}>
                <div>Hello</div>
            </ReflexElement>
            <ReflexSplitter />
            <ReflexElement minSize={300} flex={0.2}>
                <div>hello 2222</div>
            </ReflexElement>
        </ReflexContainer>
      </div>
    );
  }
}

export default App;

And here is the standard package.json

{
  "name": "test-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.2",
    "react-app-polyfill": "^1.0.6",
    "react-dom": "^16.4.2",
    "react-reflex": "^3.0.22",
    "react-scripts": "1.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

This runs fine in most browsers, except for IE 11. Console provides the following error:

and the syntax error its referring to is the following:

From the look of it I can only see that ES6 syntax has found its way to an ES5 transpiled bundle. As mentioned above, I have done this experiment both with create-react-app and a custom webpack/react environment, and the output are the same for both.

Is there any additional configuration that needs to be done here?

[arash87]

@wonskarol I ended up setting an alias in my webpack config to reference the commonjs build, instead of the es, as es is not transpiled to es5.

My webpack config did not exclude the /node_modules/ either, and still couldn’t transpile that es folder. The same goes with CRA project.

@leefsmp I can also confirm that the package.json is correct, meaning that module references an ES module, and not commonjs. The issue is that the module can’t be having ES6 features (classes, const) unless this library isn’t meant for IE. What I understand from the the “fuzzy” guidelines, is that when it comes to react components, the es bundle should still be transpiled to ES5.

[wonskarol]

I think package.json is correct, but the way you create files in es folder might be wrong - probably they should be transpiled to es5. I haven’t found clear answer for that, but this is my assumption