Getting Minified React error #31 when trying to view SPFx webpart in Internet Explorer 11

Question

We have SPFx webpart on version 1.8.2 using React version 16.7.0. When we test the webpart on Google Chrome it works perfectly fine. But when we test it on Internet Explorer 11 it shows error in browser console of Minified React error #31. The link in error message redirects here and it mentions error as Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner})..

As per the fix suggested here

I fixed this by enforcing a load order in my webpack bundle:

1. babel-polyfill
2. react
3. react-dom

But where I mention this order in my SPFx webpart project? The previous link also suggests adding symbol polyfills, but still no luck and I ran into another error now TypeError: Object doesn't support property or method 'hasOwnProperty'. Below are the symbol polyfills I imported.

import 'core-js/es6/object';
import 'core-js/es7/object';
import 'core-js/es6/number';
import 'core-js/es6/array';
import 'core-js/es6/symbol';
import 'core-js/es7/symbol';
import "@pnp/polyfill-ie11";

How can I fix this issue?

Update 1:

Initially I thought this issue was fixed because of reordering of polyfills, but the issue still persists. SO I have deleted my answer. A couple of additional updates:

1. When I test my webpart in workbench in IE 11, it works. It is only after I deploy the solution and load the page where the webpart is added, is when I get this error.
2. I tried the a suggestion mentioned in this article to create source map so that I could debug the minified solution in IE 11, but wasn't able to get it to work.

Can anyone give me pointers as to how can I debug my solution or what can be the problem here?

Updated 2:

I have tried to debug the deployed code via suggestions given here and here. But somehow my tsx and ts code runs through and then I get the error.

We are using IE version 11.1565.16299.0

Is there any other way to debug this problem?

Answer 1

In my case. the source of the react bug was the version of the @pnp/polyfill-ie11 package.

It happens that I was using @pnp/[email protected], that 2.0.1 version was causing some random issues depending on which list columns were rendered. I then rollback to an older version @pnp/[email protected] (version 1.0.2 ) which I was already using in other projects, and the react issue was gone.

Hope this helps buddy.

Answer 2

I never had this issue by my self but I recently found this:

import { sp } from "@pnp/sp";
sp.setup({
  ie11: true, // set ie 11 mode
});

source: IE11Mode - PnP/PnPjs

Seems to be an alternative to your way. Would be nice to know if it works.

In addition to the polyfill package I read that you should load polyfill as the very first package and than the others. Sadly I lost the source where I read this, mea culpa.