Razzle: React app not rendering in IE11 and below

[yves-s]

The issue is already reported and closed under react #8379 and fixed in create-react-app #2691

_I justed copied some content of the reported issues, I hope that helps_

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

A blank white screen shows instead and a syntax error is thrown in the console.
I testet a clean create-react-app app and create-razzle-app app in <= IE 11. The cra app did work as expected but the cr(zzl)a app didn't.

What is the expected behavior?

To render as it does in Chrome, Firefox, etc.

Environment

node -v: 9.5.0
npm -v: 5.6.0
yarn -v: 1.3.2

Then, specify:
Operating system: macOS High Sierra 10.13.3
Browser and version (if relevant): Internet Explorer <= 11 (via VirtualBox)

Steps to Reproduce

yarn add global create-razzle-app
create-razzle-app my-app
cd my-app
yarn start
Open Internet Explorer 11 and navigate to app URL
Observe a blank screen and check console and see syntax error has been thrown

I also tried the suggestions in the react issue above but couldn't fix it.

[jirikuchta]

From the babel-preset-razzle README.md:

This preset uses the useBuiltIns option with transform-object-rest-spread, which assumes that Object.assign is available or polyfilled.

Because IE11 (and older) does not have native support, it might be the problem. Have you tried to polyfill Object.assign?

[aprilcoskun]

@jirikuchta I tried to add transform-object-assign plugin to .babelrc but still not working.

[pcraig3]

Hey, I've just run into this issue as well.

Starting a new razzle app and booting it up in IE11, it gets back the server-rendered stuff but then the client-side javascript (ie, the element styling) breaks.

The error that comes up in the IE11 console is:

The source of the error is an arrow function in razzle-dev-utils:

Adding some babel configuration to transpile JS for IE11 will (by default) only apply to code outside of the node_modules folder, so it seems like the answer is that razzle-dev-utils should be transpiled to run on older browsers (for ourselves, we are interested in targeting IE11). There is a related discussion here in the Create React App repo.

Does that sound about right, or have I got the wrong idea here?

[pcraig3]

Ah, ignore my last comment, it appears this has been fixed: https://github.com/jaredpalmer/razzle/pull/547

[yves-s]

Then this issue probably can be closed?

[pcraig3]

It looks like it's still a problem for branches other than master. When you do a create-razzle-app my-app call, it's still including react-dev-tools: 4.1.0 rather than the downgraded version. Not sure whether this is still a problem for others, but for us it isn't.

[martinhorvath1]

Hey, I have a project with razzle version 0.8.14 and this issue is still present. Can we expect an update with the downgraded strip-ansi version?

[lauramann]

I have a project with razzle verison 3.0.0 and this is still an issue for me.