search

SharePoint / sp-dev-docs

SharePoint & Viva Connections Developer Documentation
https://docs.microsoft.com/en-us/sharepoint/dev/
Creative Commons Attribution 4.0 International
1.24k stars 1k forks source link

[SPWebPartErrorCode.IncorrectBoostrapModule]: Bootstrap module for web part correct type. Make sure to export your web part as 'export default WebPartName #8971

Open mabedd opened 1 year ago

mabedd commented 1 year ago

Target SharePoint environment

SharePoint Server 2019 (on-premise)

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

None

What browser(s) / client(s) have you tested

Additional environment details

Describe the bug / error

Most SPFX Webparts iconsisntatly giving the error:

[SPWebPartErrorCode.IncorrectBoostrapModule]:
Bootstrap module for web part  not of the correct type. Make sure to export your web part as 'export default WebPartName'.

The weird thing is that it occurs sometimes, with a page refresh the problems goes away. Some Webparts breaks with a refresh, so multiple refreshes are needed to have a complete webpage with functional webparts.

Even sometimes happen with built in Webparts such as Dividers.

Steps to reproduce

  1. Add WebParts
  2. Issue occurs
  3. Refresh the page

Expected behavior

Since using suitable dependencies, things should work fine.

ghost commented 1 year ago

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

patrik033 commented 1 year ago

You are trying to render functional components and are using react version 15.6.2, correct?

mabedd commented 1 year ago

Yes I am Yo generates a Class component and I convert it to Functional component.

Note that webparts are crashing in an inconsistent way including some SharePoint WebParts such as dividers.

patrik033 commented 1 year ago

Yes I am Yo generates a Class component and I convert it to Functional component.

Note that webparts are crashing in an inconsistent way including some SharePoint WebParts such as dividers.

Okay I'm not sure if this is the cause but I believe functional components are supported from react 16.8

mabedd commented 1 year ago

Yes I am Yo generates a Class component and I convert it to Functional component. Note that webparts are crashing in an inconsistent way including some SharePoint WebParts such as dividers.

Okay I'm not sure if this is the cause but I believe functional components are supported from react 16.8

The weird thing is that it is not happening in a constant way, it comes and goes with a refresh. Also, some SP WebParts breaks such as dividers. Does really React Functional components affecting this ?

mabedd commented 1 year ago

I think this error in console is related as well:

Uncaught Error: No callbackHandler found.
    at e._sendMessage (sp-pages-assembly.js?uniqueId=2g4QD:119:216423)
    at e.sendPageLoaded (sp-pages-assembly.js?uniqueId=2g4QD:119:215648)
    at t._onPostMessageLoading (sp-pages-assembly.js?uniqueId=2g4QD:119:290061)
    at t._onPostMessage (sp-pages-assembly.js?uniqueId=2g4QD:119:289735)

The full callstack is as follows:

Error
    at t [as constructor] (https://{url}/_layouts/15/next/spclient/en-us/sp-pages-assembly.js?uniqueId=2g4QD:356:15766)
    at new t (https://{url}/_layouts/15/next/spclient/en-us/sp-pages-assembly.js?uniqueId=2g4QD:456:8912)
    at t.createWithLogProperties (https://{url}/_layouts/15/next/spclient/en-us/sp-pages-assembly.js?uniqueId=2g4QD:456:9485)
    at e._instantiateWebPart (https://{url}/_layouts/15/next/spclient/en-us/sp-pages-assembly.js?uniqueId=2g4QD:456:70184)
    at e._initializeAndRenderWebPart (https://{url}/_layouts/15/next/spclient/en-us/sp-pages-assembly.js?uniqueId=2g4QD:456:71856)
    at https://portal.nhic.gov.sa/_layouts/15/next/spclient/en-us/sp-pages-assembly.js?uniqueId=2g4QD:456:58027
***LOGPROPERTIES:

You can see that this file sp-pages-assembly.js?uniqueId=2g4QD:119:216423 is appearing in both console and the callstack

mabedd commented 1 year ago

Package.json:

{
  "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",
    "preinstall": "npx npm-force-resolutions"
  },
  "resolutions": {
    "@types/react": "15.6.6"
  },
  "dependencies": {
    "@microsoft/decorators": "~1.4.0",
    "@microsoft/sp-application-base": "~1.4.0",
    "@microsoft/sp-core-library": "~1.4.0",
    "@microsoft/sp-dialog": "~1.4.0",
    "@microsoft/sp-lodash-subset": "~1.4.0",
    "@microsoft/sp-office-ui-fabric-core": "~1.4.0",
    "@microsoft/sp-webpart-base": "~1.4.0",
    "@pnp/common": "^1.3.0",
    "@pnp/logging": "^1.3.0",
    "@pnp/odata": "^1.3.0",
    "@pnp/sp": "^1.3.0",
    "@types/es6-promise": "0.0.33",
    "@types/react": "15.6.6",
    "@types/react-dom": "15.5.6",
    "@types/react-router": "^4.0.21",
    "@types/webpack-env": "1.13.1",
    "bootstrap": "^5.2.3",
    "react": "15.6.2",
    "react-bootstrap": "^2.7.3",
    "react-dom": "15.6.2",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.4.1",
    "@microsoft/sp-module-interfaces": "~1.4.1",
    "@microsoft/sp-webpart-workbench": "~1.4.1",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "@types/react": "^15.6.6",
    "ajv": "~5.2.2",
    "gulp": "~3.9.1",
    "npm-force-resolutions": "0.0.10",
    "typescript": "^3.6.4"
  }
mabedd commented 1 year ago

I think I found a solution.

I was having an Extension to globally load CSS and JS files from SiteLibrarywith the following code:

    const styleLinkTag: HTMLLinkElement = document.createElement("link");
    styleLinkTag.href = styleURL;
    styleLinkTag.rel = "stylesheet";
    styleLinkTag.type = "text/css";
    head.insertAdjacentElement("beforeEnd", styleLinkTag);

Just for trial, I tried to load the files using SPComponentLoader in each WebPart and the issue is not occurring anymore. I don't know why the first approach is causing such error but at least it was solved.

kryssyhayes commented 8 months ago

I think I found a solution.

I was having an Extension to globally load CSS and JS files from SiteLibrarywith the following code:

    const styleLinkTag: HTMLLinkElement = document.createElement("link");
    styleLinkTag.href = styleURL;
    styleLinkTag.rel = "stylesheet";
    styleLinkTag.type = "text/css";
    head.insertAdjacentElement("beforeEnd", styleLinkTag);

Just for trial, I tried to load the files using SPComponentLoader in each WebPart and the issue is not occurring anymore. I don't know why the first approach is causing such error but at least it was solved.

where do you put that code you are mentioning? you mention an extension, but I am still new at sharepoint to understand how to apply this solution as my situation seems to be the same as described.