Reactjs class components not rendered but functions are rendered in IE11

Question

I am developing a React app with antd. In Chrome works as expected. In the IE-11 it renders a blank page. The IE console reports the following syntax error:

script 1002 main.chunk.js (127,1)

When I convert the class components into function components, it starts rendering. Why the class components does not? Can anyone help me...?

Thanks a lot in advance!!

Answer 1

In React we write ES6 code that is newer version of java script, and some of older browser don't support it, due to that we need babel (a javascript compiler) so our jsx can be compiled into plain javascript.

you can learn more about bable from here .

also if you're new to react and don't want to configure webpack by yourself you can simply use create react app it is a boiler plate to create react applications, it will do all the configrations by himself.

Answer 2

Why the class components does not? Can anyone help me...?

It's because IE 11 doesn't supports es6 classes. In such questions, try looking at https://caniuse.com/#search=classes for feature support.

Now, you know why. How you can overcome this is with the help of a transpiler like babel . Usually you would like to bootstrap your app with the help of a boilerplate, wherein you don't have to worry about such things in the start since your focus is on learning React. Create React app is a pretty decent one to to get started and will abstract out many such issues for you. It has transpilation, hot reloading, webpack and much more configured. Happy learning!

Answer 3

By default, the generated project supports all modern browsers. Support for Internet Explorer 9, 10, and 11 requires polyfills. For a set of polyfills to support older browsers, use react-app-polyfill .

Reference: Supported Browsers