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?

0

Finally found the solution. What I was doing was that I was importing the polyfills after the statements of

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

I moved all my polyfills before even react loaded and the code started working on Internet Explorer. So the in my <WebPartName>WebPart.ts looked something like this.

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

import * as React from 'react';
import * as ReactDom from 'react-dom';
<More imports>

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.