React-hot-loader: IE11 is throwing errors

[karolisgrinkevicius-home24]

Description

IE11 is throwing error regarding usage of Object.assign without it being polyfilled.

Expected behavior

IE11 doesn't throw any error in console.

Actual behavior

IE11 throws any error in console.

Environment

React Hot Loader version: 4.8.3

Run these commands in the project folder and fill in their results:

• [email protected]
• [email protected]
• MAC OS X 10.14.4
• IE11 on Windows 8.1

This should be fairly easy to reproduce for everyone. I used VirtualBox.

[theKashey]

Fair issue. As long as there were just one valid reason to use Object.assign - easy to fix.

[karolisgrinkevicius-home24]

@theKashey thanks a lot for your quick response and commit related to this issue. Do you have a clue when this is going to be released in the registry?

[theKashey]

Only tomorrow, sorry

[karolisgrinkevicius-home24]

For me https://github.com/gaearon/react-hot-loader/commit/c5af009ae7b31f26b6b1f6b909dbaa6679e3351e didn't fix the issue in IE11. Since we're supposed to include import { hot } from 'react-hot-loader/root'; there still Object.assign is present. https://github.com/gaearon/react-hot-loader/blob/v4.8.4/root.js#L17

@theKashey Could you please take another look into this? Thanks.

[theKashey]

Oh, that file dropped from my sight. I was analyzing only /src paired example using the old hot API.

[theKashey]

Now it's shall be done :)

[karolisgrinkevicius-home24]

After upgrading react-hot-loader to the latest version (4.8.5) I'm getting a syntax error:

I tried importing without root as an error states as follows:

import { hot } from 'react-hot-loader';

But in this case I get yet another error complaining about hot has not been found in the module itself.

[theKashey]

At it was working before?
Could you please debug this code, changes were around

• the first check - it was module.parents[0], which is the same (ie parent existed).
• the module.hot check. Without it(module.hot.accept) nothing would work, it should exists

[theKashey]

@karolisgrinkevicius-home24 - I really need an answer! Did I shipped broken version, or it's not so bad?!

[karolisgrinkevicius-home24]

@theKashey actually the error is different than it was before using IE11. On Chrome it's working well just like before.

Could you please debug this code, changes were around

I honestly didn't get what you want me to debug. Could you please clarify?

[theKashey]

So it’s working for Chrome, but generate this change errors only for IE11?
Is it the same build?

[karolisgrinkevicius-home24]

Yes. The error is thrown only on IE11. I was using a new build which is https://www.npmjs.com/package/react-hot-loader/v/4.8.5. The error on IE11 is caught in react-hot-loader/root.js:6, seems to be an issue that module doesn't have parents for some reasons on IE11.

[tzimmermann]

After some digging, I found that the new IE11 SyntaxError is caused by a trailing commas in the Error constructor argument list.

This fails in IE11

throw new Error(
      'React-Hot-Loader: `react-hot-loader/root` is not supported on your system. ' +
        'Please use `import {hot} from "react-hot-loader"` instead',
    );

but this works:

throw new Error(
      'React-Hot-Loader: `react-hot-loader/root` is not supported on your system. ' +
        'Please use `import {hot} from "react-hot-loader"` instead'
    );

When I fix it locally, though, I get another error that Promise is undefined which originates here https://github.com/gaearon/react-hot-loader/blob/master/src/global/generation.js#L47

[tzimmermann]

Yes. The error is thrown only on IE11. I was using a new build which is https://www.npmjs.com/package/react-hot-loader/v/4.8.5. The error on IE11 is caught in react-hot-loader/root.js:6, seems to be an issue that module doesn't have parents for some reasons on IE11.

@karolisgrinkevicius-home24 Note that the SyntaxError (at least the one I am getting) has nothing to do with runtime problems like a missing module.parents.
IE chokes on some syntax that it cannot parse, even before evaluating the JS code block.

[theKashey]

Trailing commas are mine bad, sorry.
But you have to add polyfills by your own.

[karolisgrinkevicius-home24]

Polyfills are not a problem at all. @tzimmermann thanks for digging into the issue. @theKashey could you please fix that SyntaxError so that IE11 engine is able to parse it properly?

[theKashey]

v4.8.6 would fix it

[maulikdesai21]

Is this fixed? I am still getting Object.assign in 4.12.11 and 4.8.6 gives me Promise in undefined :(

[theKashey]

So it's broken again then. Some polyfills, like Promises or Object.assign, are _commonly_ expected to be present :(

[theo-mesnil]

I have the same issue :(

[theKashey]

Just tested - the only polyfill RHL is requiring - Promise (import 'core-js/modules/es6.promise';), which going to be used in any case.

[suhanw]

I'm on 4.13.0, and it appears Promise is still undefined, it's throwing the error here:
https://github.com/gaearon/react-hot-loader/blob/69b9d483ab3b5af3db8466bbdb124591d6670b81/src/global/generation.js#L59

[StefanoVuerich]

Having the same issue @suhanw was showing.

Any news on this? Cannot run o IE11.