Cause a serious error in ie11 when use RHL with core-js@3.2.1, babel@7.5.5

[LiaoLiao]

Description

For this error, I made a reproducible demo, you can enter the build floder and run it by serve.
According to the Getting started of react-hot-loader, I wrote a react project, and I want this project is compatible with ie11. Therefore, I put 'import core-js/stable' in the top of index.js.

index.js :

import 'core-js/stable';
import 'regenerator-runtime/runtime';
import './rhlConfig';

import './main';

main.js :

import React from 'react';
import ReactDom from 'react-dom';

import App from './App';

try {
  ReactDom.render(<App />, document.getElementById('root'));
} catch (error) {
  console.log('error --->', error);
}

babel-loader config, disabled useBuiltIns option :

I build this project for production, open it in ie11 by serve, I got this error(click to enlarge ^^-^^):

that url :

https://reactjs.org/docs/error-decoder.html/?invariant=31&args[]=object%20with%20keys%20%7B%24%24typeof%2C%20type%2C%20key%2C%20ref%2C%20props%2C%20_owner%7D&args[]=%20for%20the%20full%20message%20or%20use%20the%20non-minified%20dev%20environment%20for%20full%20errors%20and%20additional%20helpful%20warnings

I opened that url that error message mentioned above, but I don't know where the error come from. When I stript react-hot-loader from project and rebuild, it works normally in ie11 browserslist.
Or don't import core-js, it works normally too. Once I use them simultaneously, that error will appear again.

If set the useBuiltIns option to 'usage' and delete the import of core-js and regenerator-runtime/runtime, because js files don't use any ecmascript method, core-js polyfills were not added, so it works normally in ie11. But ie11 need some polyfill, example: promise, Array.from etc.

'usage' option and index.js :

If I prepend the webpack entry array with polyfills that ie11 required, like this :

It works in ie11, woot, looks strange...

If set the useBuiltIns option to 'entry', that error will appear again.

'entry' option and index.js :

Expected behavior

This react project should work normally with ie11 browser.

Actual behavior

The try-catch block catch an error.

Environment

React Hot Loader version: 4.12.12
NodeJs version: 12.9.1
NPM version: 6.11.2
Operating system: Windows10 1903 Pro for WorkStations 64bit
Browser and version: IE 11
Babel/Webpack version: 7.5.5/4.39.3

Reproducible Demo

Simple Reproducible Demo

[LiaoLiao]

Note: You can safely install react-hot-loader as a regular dependency instead of a dev dependency as it automatically ensures it is not executed in production and the footprint is minimal.

This is important

[LiaoLiao]

Hope to look my Reproducible Demo

[Anton Korzunov]

polifills, core-js included, should be installed before anything else.

RHL is technically polyfill, so it should be installed before React

// index.js - import everything in the right order
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import './rhlConfig';
import './main';

// main.js - have a clean "real application" code
import React from 'react';
import ReactDom from 'react-dom';

import App from './App';

try {
  ReactDom.render(<App />, document.getElementById('root'));
} catch (error) {
  console.log('Error -->', error);
}

[LiaoLiao]

I modified my code in my Reproducible Demo, but still have that error.

[Anton Korzunov]

@DEV-YANGS - you have closed the issue because....?

[LiaoLiao]

I'm editing to rewrite a more detailed issues about this error and make a simple reproducible demo.
Additionally, I will reopen this issue.

[LiaoLiao]

I have modified this issue.

[LiaoLiao]

@theKashey , I found the solution of this error, just put the 'core-js/stable' and 'regenerator-runtime/runtime' before 'react-hot-loader/patch' in the webpack entry array, like this:

If import 'core-js/stable' and 'regenerator-runtime/runtime' after 'react-hot-loader/patch', that error will occur.

I think you should add a prompt in the doc temporarily to let developers note this problem.

[Anton Korzunov]

OOOOOF. I remember this problem.
The best solution I could give you - use as "native" compilation target as possible in dev mode. In that case 99.9% polyfills would mean literally nothing, and would be unable to cause a problem.