Issues with IE11

[arash87]

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?

[leefsmp]

I send you my sympathy if you still have to support IE in your company or with your app, unfortunately there is not much I can do to help here. As far as I can see on my side most demo examples at the exception of the multi-nested layout seem to be working fine.

So I would think it is more a problem with your bundling/transpiling step rather than the lib itself. Why don't you include directly one of the transpiled version of the lib, for example commonjs.

[leefsmp]

closing that for now as per comments above

[wonskarol]

I ran to the same issue today.

@arash87 you got this this error because react-reflex package.json has this:

 "main": "dist/commonjs/index.js",
  "module": "dist/es/index.js",

so webpack will take module over main entrypoint.
Files in es folder are not transpiled to es5, and your webpack config probably excludes node_modules... that's why you get class which breaks IE11.

Workaround for you is to import commonjs, as @leefsmp said:

import {
  ReflexContainer,
  ReflexSplitter,
  ReflexElement,
} from "react-reflex/dist/commonjs";

@leefsmp according to this comment: webpack/webpack#1979 (comment)

shouldn't you target es5 and es6 modules? Eg. react-redux does it.

Nice lib btw :)

[leefsmp]

Awesome reply, thanks a lot! I will take a look at how react-redux does it and update package.json.

[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

[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.