0

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?

  • Can you put your repo in order to help you – Milind Jan 6 at 11:02
  • @Milind: Unfortunately, will not be able to share the entire repository. Have updated my question. I am happy even if you can help me with debugging of deployed code to find root cause of the the issue. – Naveen Jan 6 at 14:18
  • Hello Naveen, I think I found a solution for your problem. Please check my answer and mark it as a solution if it helps you, thanks – Alberto S. Apr 13 at 12:23
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/polyfill-ie11@2.0.1, 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/polyfill-ie11@1.0.2 (version 1.0.2 ) which I was already using in other projects, and the react issue was gone.

Hope this helps buddy.

| improve this answer | |
  • 1
    It resolve issue. Must be up voted and marked as answer. – Kaushal Khamar Apr 13 at 11:16
  • I am already using version 1.0.2, but issue is still there. – Naveen Apr 13 at 12:30
  • thanks Naveen. In my case, the issue was related to the leverage of that 2.0.1 version of the ie11-polyfill package and IE11, when displaying certain types of list views that includes certain types of columns, I cant remember well now. In order to fix this issue, I have to either remove those columns from the view, or use the older polyfill version 1.0.2. – Alberto S. Apr 13 at 12:44
  • On the other hand, you can also to modify the webpack loader order by tweaking the spfx project's config as described here: docs.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/… – Alberto S. Apr 13 at 12:45
0

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.

| improve this answer | |
  • This option is available for PnP v2 while are using v1.3.6. – Naveen Jan 9 at 13:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.