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

SPFX webpart can't be loaded: Cannot read properties of undefined (reading 'id') #9276

Closed kenzhengau closed 10 months ago

kenzhengau commented 10 months ago

Target SharePoint environment

SharePoint Online

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

SPFX webpart works fine in the workbench but it is not loaded after the deployment and added to the page.

The error is

Could not load mgt-people-web-part in require. TypeError: Cannot read properties of undefined (reading 'id') at sp-pages-assembly_en-us_345e6f1cbb807ceb7c758a1b08a38fb7.js:77:971652 at new Promise () at e.loadComponent (sp-pages-assembly_en-us_345e6f1cbb807ceb7c758a1b08a38fb7.js:77:971620) at sp-pages-assembly_en-us_345e6f1cbb807ceb7c758a1b08a38fb7.js:77:973657 at async Promise.all (index 0) spfx-mgt-people-webpart.zip

Steps to reproduce

  1. create a project with yo
  2. add bunch of react component
  3. code the functionality
  4. test with the workbench
  5. gulp clean --ship && gulp build --ship && gulp bundle --ship && gulp package-solution --ship
  6. deploy the .sppkg
  7. add the web part to the site's apps
  8. embed the web part

Expected behavior

The web part should show the as same as in the workbench

ghost commented 10 months ago

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

andrewconnell commented 10 months ago

That project looks like it was partially upgraded to a different SPFx version (from 1.17.2 > 1.18.0)... the SPFx library dependencies should all be the same version...

"@microsoft/sp-application-base": "^1.18.0",
"@microsoft/sp-component-base": "^1.17.2",
"@microsoft/sp-core-library": "1.17.2",
"@microsoft/sp-lodash-subset": "1.17.2",
"@microsoft/sp-office-ui-fabric-core": "1.17.2",
"@microsoft/sp-property-pane": "1.17.2",
"@microsoft/sp-webpart-base": "^1.18.0",

Also, that's an old version of OUIFR referenced and is missing the Fluent UI package in v1.18...

"office-ui-fabric-react": "^7.199.1",

I don't see this in a brand-new SPFx v1.18 project. Suggest you get the project in a healthy state before verifying the error you posted because SPFx doesn't support running different versions in the same project.

kenzhengau commented 10 months ago

That project looks like it was partially upgraded to a different SPFx version (from 1.17.2 > 1.18.0)... the SPFx library dependencies should all be the same version...

"@microsoft/sp-application-base": "^1.18.0",
"@microsoft/sp-component-base": "^1.17.2",
"@microsoft/sp-core-library": "1.17.2",
"@microsoft/sp-lodash-subset": "1.17.2",
"@microsoft/sp-office-ui-fabric-core": "1.17.2",
"@microsoft/sp-property-pane": "1.17.2",
"@microsoft/sp-webpart-base": "^1.18.0",

Also, that's an old version of OUIFR referenced and is missing the Fluent UI package in v1.18...

"office-ui-fabric-react": "^7.199.1",

I don't see this in a brand-new SPFx v1.18 project. Suggest you get the project in a healthy state before verifying the error you posted because SPFx doesn't support running different versions in the same project.

updated Version but same error, works fine in workbench

"dependencies": { "@fluentui/react-components": "^9.35.0", "@microsoft/mgt": "^3.1.3", "@microsoft/mgt-react": "^3.1.3", "@microsoft/mgt-spfx": "^3.1.3", "@microsoft/sp-application-base": "^1.18.0", "@microsoft/sp-component-base": "^1.18.0", "@microsoft/sp-core-library": "^1.18.0", "@microsoft/sp-lodash-subset": "^1.18.0", "@microsoft/sp-office-ui-fabric-core": "^1.18.0", "@microsoft/sp-property-pane": "1.18.0", "@microsoft/sp-webpart-base": "^1.18.0", "antd": "^4.24.14", "jspdf": "^2.5.1", "jspdf-autotable": "^3.7.0",
"papaparse": "^5.4.1", "react": "17.0.1", "react-dom": "17.0.1", "react-json-to-csv": "^1.2.0", "tslib": "2.3.1" }, "devDependencies": { "@fluentui/react": "^7.204.0", "@microsoft/eslint-config-spfx": "1.18.0", "@microsoft/eslint-plugin-spfx": "1.18.0", "@microsoft/rush-stack-compiler-4.5": "0.5.0", "@microsoft/sp-build-web": "1.18.0", "@microsoft/sp-module-interfaces": "1.18.0", "@rushstack/eslint-config": "2.5.1", "@types/markdown-it": "^12.2.3", "@types/react": "17.0.45", "@types/react-dom": "17.0.17", "@types/webpack-env": "~1.15.2", "ajv": "^6.12.6", "eslint": "8.7.0", "eslint-plugin-react-hooks": "4.3.0", "gulp": "4.0.2", "typescript": "4.5.5" }

AJIXuMuK commented 10 months ago

@kenzhengau - I believe you should deploy mgt-spfx library package to your tenant.

Also - do not use ^ in your SPFx package versions. It can lead to inconsistent versioning.

andrewconnell commented 10 months ago

@kenzhengau there's still a bunch of stuff in there that's not correct... like you're using the v9 of Fluent UI React... only v8 is supported in SPFx. Suggest you go back to your v1.17.2 project and run the M365 CLI's project update command to upgrade the project correctly. Or use the doctor command to inspect issues.

What you've shared simply isn't enough to figure out what's wrong, but what you've shared in the package.json is enough for me to say "ok, first step - make sure you upgrade the project correctly before you start chasing down build/runtime errors"

kenzhengau commented 10 months ago

@kenzhengau there's still a bunch of stuff in there that's not correct... like you're using the v9 of Fluent UI React... only v8 is supported in SPFx. Suggest you go back to your v1.17.2 project and run the M365 CLI's project update command to upgrade the project correctly. Or use the doctor command to inspect issues.

What you've shared simply isn't enough to figure out what's wrong, but what you've shared in the package.json is enough for me to say "ok, first step - make sure you upgrade the project correctly before you start chasing down build/runtime errors"

Thanks Andrew, you are the legend! The downgrade fixed the issue

ghost commented 10 months ago

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues