Unhandled promise rejection Error: Minified React error #31; in IE 11- Pnp PolyFills

ArunRajiv commented 4 years ago

Version

Please specify what version of the library you are using: [ pnp: 2.0.6 & @pnp/polyfill-ie11": "^2.0.2 ]

Please specify what version(s) of SharePoint you are targeting: [ SharePoint Online- Modern Team site - ]

If you are not using the latest release, please update and see if the issue is resolved before submitting an issue.

Expected / Desired Behavior / Question

Running well after using IE11 mode in IE11.

Observed Behavior

There are errors happened, and the page turn to blank.

Steps to Reproduce

Build an SPFx Webpart to use IE11 mode, and then deploy it to SharePoint. When run it in ie11, it work fine at first, but then an error occur and the page turn into blank.

This is again the duplicate of issue reported here. Finally, it has been stated that, it is not possible to support all possible polyfills. Agreed.. And, I have followed some of the steps mentioned in the other post. still not able to figure out, what is the source of this error, which polyfill needs to be added to get this issue fixed. Please help us out how to understand this error and proceed further.

Steps Tried

Downgraded the Pnp Version to 1.x.0 - still issue persits.
bundled the package without --ship and deployed. same error getting logged in the Console.
Installed and Included below polyfills in top WebPart.ts - still issue persists.
import "core-js/stable/array/from";
import "core-js/stable/array/fill";
import "core-js/stable/array/iterator";
import "core-js/stable/promise";
import "core-js/stable/reflect";
import "es6-map/implement";
import "core-js/stable/symbol";
import "whatwg-fetch";

Code: PnpHelper Class import "@pnp/polyfill-ie11"; import { sp } from '@pnp/sp'; import "@pnp/sp/webs"; import "@pnp/sp/lists"; import "@pnp/sp/items"; import "@pnp/sp/views"; import "@pnp/sp/site-users/web"; import "@pnp/sp/site-groups"; import { IItemAddResult } from "@pnp/sp/items"; import { dateAdd } from "@pnp/common";

export class PnPHelper { constructor(wpContext: any) { sp.setup({ sp: { headers: { "Accept": "application/json; odata=verbose", "ContentType": "application/json; odata=verbose", } }, // set ie 11 mode ie11: true, spfxContext: wpContext, }); } }

WebPart.ts:

import as React from 'react'; import as ReactDom from 'react-dom'; import { Version } from '@microsoft/sp-core-library'; import { IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-property-pane'; import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; import 'core-js/es6/array';

Package-JSON: { "name": "XX-XX-webpart", "version": "0.0.1", "private": true, "main": "lib/index.js", "engines": { "node": ">=0.10.0" }, "scripts": { "build": "gulp bundle", "clean": "gulp clean", "test": "gulp test" }, "dependencies": { "@microsoft/sp-core-library": "1.10.0", "@microsoft/sp-lodash-subset": "1.10.0", "@microsoft/sp-office-ui-fabric-core": "1.10.0", "@microsoft/sp-property-pane": "1.10.0", "@microsoft/sp-webpart-base": "1.10.0", "@pnp/common": "^2.0.6", "@pnp/logging": "^2.0.6", "@pnp/odata": "^2.0.6", "@pnp/polyfill-ie11": "^2.0.2", "@pnp/sp": "^2.0.6", "@pnp/spfx-controls-react": "1.18.0", "@types/es6-promise": "0.0.33", "@types/react": "16.8.8", "@types/react-dom": "16.8.3", "@types/webpack-env": "1.13.1", "office-ui-fabric-react": "6.189.2", "office-ui-fabric-react-pagination": "0.0.8", "react": "16.8.5", "react-dom": "16.8.5", "react-ga": "^3.0.0", "react-sortable-hoc": "^1.11.0" }, "resolutions": { "@types/react": "16.8.8" }, "devDependencies": { "@microsoft/rush-stack-compiler-3.3": "0.3.5", "@microsoft/sp-build-web": "1.10.0", "@microsoft/sp-module-interfaces": "1.10.0", "@microsoft/sp-tslint-rules": "1.10.0", "@microsoft/sp-webpart-workbench": "1.10.0", "@types/chai": "3.4.34", "@types/core-js": "^2.5.3", "@types/mocha": "2.2.38", "ajv": "~5.2.2", "gulp": "~3.9.1" } } Error logged in IE console

juliemturner commented 4 years ago

First, please reviewed our general statement on polyfills.

I can totally empathize with your pain of trying to solve for IE11 compatibility issues. I know from my own experience that trying to make modern solutions work is incredibly difficult, and that issues can arise from multiple difference sources. I can see that you're including a lot of different npm packages, any one of them could be contributing to the issue. I also know that I've personally had some difficultly with including "core-js/stable/symbol" and when I removed it that seemed to help, but not in all cases. The reality is you need to look into those console errors and try and parse out either what's missing or what's included that may be conflicting to find the unique solution for your code. I'm sorry that I cannot offer more assistance than that.

ArunRajiv commented 4 years ago

@juliemturner Thank you for the response. Just wondering why it is working in a few scenarios, but not in Modern Team Site.

We have deployed my solution on 3 pages and then checked in IE: 1.Classic Page - it works fine on classic page

Modern Page on Communication Site - It works fine if you turn off comments of Modern page and then deploy the solution. 3.Modern Page on Team Site - not working

appreciate your help.

juliemturner commented 4 years ago

For exactly the reason stated in the polyfills statement...

We are finding when we aggregate our polyfills with the polyfills provided in the SharePoint page and from other sources, things don't always work well.

Basically, I suspect that something is different about a SharePoint page in a team site then in a communication site, and we've seen reports of that before. Unfortunatley it's just not something that's related to this library the best we can do is give you a listing of those as a stand alone library we know we're dependent on... they can often already be included in the page in other ways and then they conflict or they can be negated by other things on the page, it's absolutely a horrendeous task to get working.

ArunRajiv commented 4 years ago

@juliemturner as you mentioned, I have parsed the complete trace which was getting logged in IE console error and it looks like it is something to do with "Symbol". I have tried with including core-js/stable/symbol at the top of WebPart.ts. still no luck. Could you please suggest if you know any way to overcome this? If there is no fix, we have to live-with by compromising this getting loaded in IE and inform the same to our stakeholders.

Unhandled promise rejection Error: Minified React error #31; visit 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[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings. "Unhandled promise rejection" {

  @@hasInstance: undefined,
  @@isConcatSpreadable: undefined,
  @@iterator: undefined,
  @@match: undefined,
  @@observable: undefined,
  @@react.concurrent_mode: undefined,
  @@react.context: undefined,
  @@react.element: undefined,
  @@react.forward_ref: undefined,
  @@react.fragment: undefined,
  @@react.fundamental: undefined,
  @@react.lazy: undefined,
  @@react.memo: undefined,
  @@react.portal: undefined,
  @@react.profiler: undefined,
  @@react.provider: undefined,
  @@react.responder: undefined,
  @@react.strict_mode: undefined,
  @@react.suspense: undefined,
  @@react.suspense_list: undefined,
  @@replace: undefined,
  @@search: undefined,
  @@species: undefined,
  @@split: undefined,
  @@test symbol: undefined,
  @@toPrimitive: undefined,
  @@toStringTag: undefined,
  @@unscopables: undefined,
  __proto__: { },
  description: "31",
  message: "Minified React error #31; visit 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[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings. ",
  name: "Error",
  stack: "Error: Minified React error #31; visit 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[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

at Gl (https://spoprod-a.akamaihd.net/files/sp-client/sp-pages-assembly_en-us_b3f3efdb98b60faeb8b52e064fedba42.js:1:1627701) at Anonymous function (https://spoprod-a.akamaihd.net/files/sp-client/sp-pages-assembly_en-us_b3f3efdb98b60faeb8b52e064fedba42.js:1:1632510) at ea (https://spoprod-a.akamaihd.net/files/sp-client/sp-pages-assembly_en-us_b3f3efdb98b60faeb8b52e064fedba42.js:1:1640000) at oa (https://spoprod-a.akamaihd.net/files/sp-client/sp-pages-assembly_en-us_b3f3efdb98b60faeb8b52e064fedba42.js:1:1644132) at aa (https://spoprod-a.akamaihd.net/files/sp-client/sp-pages-assembly_en-us_b3f3efdb98b60faeb8b52e064fedba42.js:1:1643911) at Oo (https://spoprod-a.akamaihd.net/files/sp-cli", Symbol()_1a.7buweqeiry: undefined, Symbol()_1b.7buweqeiry: undefined, Symbol()_1c.7buweqeiry: undefined, Symbol()_10.7buweqeiry: undefined, Symbol()_11.7buweqeiry: undefined, Symbol()_19.7buweqeiry: undefined, Symbol()_b.7buweqeis57: undefined, Symbol(__extensions)_i.7buweqeisbp: undefined, Symbol(nodejs.util.inspect.custom)_j.7buweqeisbp: undefined, Symbol(observable)_y.7buweqeiryp: undefined, Symbol(react.async_mode)_12.7buweqeiry: undefined, Symbol(react.call)_w.7buweqeiryp: undefined, Symbol(react.concurrent_mode)_q.7buweqeisbp: undefined, Symbol(react.context)_p.7buweqeisbp: undefined, Symbol(react.element)_v.7buweqeisbp: undefined, Symbol(react.forward_ref)_r.7buweqeisbp: undefined, Symbol(react.fragment)_l.7buweqeisbp: undefined, Symbol(react.fundamental)_14.7buweqeiry: undefined, Symbol(react.lazy)_u.7buweqeisbp: undefined, Symbol(react.memo)_t.7buweqeisbp: undefined, Symbol(react.portal)_k.7buweqeisbp: undefined, Symbol(react.profiler)_n.7buweqeisbp: undefined, Symbol(react.provider)_o.7buweqeisbp: undefined, Symbol(react.responder)_15.7buweqeiry: undefined, Symbol(react.return)_x.7buweqeiryp: undefined, Symbol(react.scope)_16.7buweqeiry: undefined, Symbol(react.strict_mode)_m.7buweqeisbp: undefined, Symbol(react.suspense)_s.7buweqeisbp: undefined, Symbol(react.suspense_list)_13.7buweqeiry: undefined, Symbol(rxSubscriber)_17.7buweqeiry: undefined, Symbol(Symbol._hidden)_z.7buweqeiryp: undefined, Symbol(util.promisify.custom)_18.7buweqeiry: undefined }

juliemturner commented 4 years ago

I was saying I do not include that polyfil and that often helps but not always... honestly that's all I can tell you.

ArunRajiv commented 4 years ago

oh. Thank you! closing this.

github-actions[bot] commented 3 years ago

This issue is locked for inactivity or age. If you have a related issue please open a new issue and reference this one. Closed issues are not tracked.

pnp / pnpjs