Webpart Creation Failed in Teams Toolkit

paraggin commented 5 months ago

Webpart Creation Failed Using Teams Toolkit from 3-4 days.

Project Already Created and 5 Webpart Already Added to that project but now suddenly not able to add new webpart.

Below is version of Node,npm and other Packages. Teams Toolkit Version : 5.2.0 OS : Windows 10 IDE : VS Code

Same Version working before some days..Currently Not working.

yuqizhou77 commented 5 months ago

Hi @paraggin Thanks for reporting the issue. I noticed that you are using node 14

May I know when the previous webparts are added and are they all added by Teams Toolkit before?
Could you share the content of package.json and .yo-rc.json if exist in src folder?
Adding webpart in Teams Toolkit will by default use latest spfx package and there will be compatibility issue if running on node 14 as it requires node16 or node 18. You could learn more from https://learn.microsoft.com/en-us/sharepoint/dev/spfx/compatibility#spfx-development-environment-compatibility. You could try manually add web part and edit manifest.json following steps mentioned in https://github.com/OfficeDev/TeamsFx/issues/10382#issuecomment-1814011395 if you don't want to upgrade project.

paraggin commented 5 months ago

1) May I know when the previous webparts are added and are they all added by Teams Toolkit before? YES 2) Package.json { "name": "purchage-order", "version": "0.0.1", "private": true, "main": "lib/index.js", "scripts": { "build": "gulp bundle", "clean": "gulp clean", "test": "gulp test" }, "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@fluentui/react": "^8.106.4", "@microsoft/load-themed-styles": "^2.0.83", "@microsoft/sp-component-base": "1.18.1", "@microsoft/sp-core-library": "1.18.1", "@microsoft/sp-lodash-subset": "1.18.1", "@microsoft/sp-office-ui-fabric-core": "1.18.1", "@microsoft/sp-property-pane": "1.18.1", "@microsoft/sp-webpart-base": "1.18.1", "@mui/icons-material": "^5.14.18", "@mui/material": "^5.14.18", "@mui/x-charts": "^6.0.0-alpha.13", "@mui/x-data-grid": "^6.18.1", "bootstrap": "^5.3.2", "office-ui-fabric-react": "7.185.7", "react": "17.0.1", "react-dom": "17.0.1", "tslib": "2.3.1" }, "devDependencies": { "@babel/core": "^7.23.3", "@babel/preset-env": "^7.23.3", "@microsoft/eslint-config-spfx": "1.15.2", "@microsoft/eslint-plugin-spfx": "1.15.2", "@microsoft/rush-stack-compiler-4.5": "0.2.2", "@microsoft/sp-build-web": "^1.18.1", "@microsoft/sp-module-interfaces": "1.18.1", "@rushstack/eslint-config": "2.5.1", "@types/react": "17.0.45", "@types/react-dom": "17.0.17", "@types/webpack-env": "~1.15.2", "ajv": "^6.12.5", "babel-loader": "^9.1.3", "eslint-plugin-react-hooks": "4.3.0", "gulp": "4.0.2", "typescript": "4.5.5", "webpack": "^5.89.0", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.1" } }

.yo-rc.json { "@microsoft/generator-sharepoint": { "whichFolder": "subdir", "solutionName": "Purchage Order", "environment": "spo", "skipFeatureDeployment": "true", "isDomainIsolated": "false", "componentType": "webpart", "template": "react", "componentName": "Dashboard", "plusBeta": false, "isCreatingSolution": false, "version": "1.15.2", "libraryName": "purchage-order", "libraryId": "ffab3ddd-dff0-44aa-919b-3ebcee31e401", "packageManager": "npm", "solutionShortDescription": "Purchage Order description", "nodeVersion": "14.18.1", "sdksVersions": { "@microsoft/microsoft-graph-client": "3.0.2", "@microsoft/teams-js": "2.12.0" } } }

3) I have follow This steps to add webpart manually. It failed..

I have tried latest version of the spfx .it also failed.

yuqizhou77 commented 5 months ago

May I know when the previous webparts are added and are they all added by Teams Toolkit before? YES

Package.json { "name": "purchage-order", "version": "0.0.1", "private": true, "main": "lib/index.js", "scripts": { "build": "gulp bundle", "clean": "gulp clean", "test": "gulp test" }, "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@fluentui/react": "^8.106.4", "@microsoft/load-themed-styles": "^2.0.83", "@microsoft/sp-component-base": "1.18.1", "@microsoft/sp-core-library": "1.18.1", "@microsoft/sp-lodash-subset": "1.18.1", "@microsoft/sp-office-ui-fabric-core": "1.18.1", "@microsoft/sp-property-pane": "1.18.1", "@microsoft/sp-webpart-base": "1.18.1", "@mui/icons-material": "^5.14.18", "@mui/material": "^5.14.18", "@mui/x-charts": "^6.0.0-alpha.13", "@mui/x-data-grid": "^6.18.1", "bootstrap": "^5.3.2", "office-ui-fabric-react": "7.185.7", "react": "17.0.1", "react-dom": "17.0.1", "tslib": "2.3.1" }, "devDependencies": { "@babel/core": "^7.23.3", "@babel/preset-env": "^7.23.3", "@microsoft/eslint-config-spfx": "1.15.2", "@microsoft/eslint-plugin-spfx": "1.15.2", "@microsoft/rush-stack-compiler-4.5": "0.2.2", "@microsoft/sp-build-web": "^1.18.1", "@microsoft/sp-module-interfaces": "1.18.1", "@rushstack/eslint-config": "2.5.1", "@types/react": "17.0.45", "@types/react-dom": "17.0.17", "@types/webpack-env": "~1.15.2", "ajv": "^6.12.5", "babel-loader": "^9.1.3", "eslint-plugin-react-hooks": "4.3.0", "gulp": "4.0.2", "typescript": "4.5.5", "webpack": "^5.89.0", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.1" } }

.yo-rc.json { "@microsoft/generator-sharepoint": { "whichFolder": "subdir", "solutionName": "Purchage Order", "environment": "spo", "skipFeatureDeployment": "true", "isDomainIsolated": "false", "componentType": "webpart", "template": "react", "componentName": "Dashboard", "plusBeta": false, "isCreatingSolution": false, "version": "1.15.2", "libraryName": "purchage-order", "libraryId": "ffab3ddd-dff0-44aa-919b-3ebcee31e401", "packageManager": "npm", "solutionShortDescription": "Purchage Order description", "nodeVersion": "14.18.1", "sdksVersions": { "@microsoft/microsoft-graph-client": "3.0.2", "@microsoft/teams-js": "2.12.0" } } }

I have follow This steps to add webpart manually. It failed..

I have tried latest version of the spfx .it also failed.

Before adding a new web part, I am wondering if you have tried local debug for the previous web parts?

since you are using node 14, adding web part by Teams Toolkit will fail as Teams Toolkit will use latest yo(5.0) and latest SPFx(1.18.2), which requires node 16 or 18. Could you try install yo@4.3.1 and SPFx@1.15.2 globally (which seems to match your project version), and then follow steps in https://github.com/OfficeDev/TeamsFx/issues/10382#issuecomment-1814011395 ?

paraggin commented 5 months ago

Currently yo@4.3.1 and SPFx@1.15.2 globally installed in my system.With the same version not able to create new webpart

yuqizhou77 commented 5 months ago

Currently yo@4.3.1 and SPFx@1.15.2 globally installed in my system.With the same version not able to create new webpart

Could you share how do you add new web part after installing the packages of these version? have to run yo command manually rather than clicking "add new web part" in Teams Toolkit as the node version is 14 on your machine.

Also I noticed that you have add some web parts which is on version 1.18.1, could you please confirm if all other webparts works well, like you could run the app?

paraggin commented 5 months ago

Currently Old Webpart Working fine with the yo@4.3.1 and SPFx@1.15.2

1. When wbpart added using command webpart added successfully..but problem arise when run using f5

Then id of the newly created webpart added to the manifest.json file as per below SS.When try to run error occure . Error :

2. When try to add webpart by clicking "add new web part" in Teams Toolkit. Below error arise

yuqizhou77 commented 5 months ago

Currently Old Webpart Working fine with the yo@4.3.1 and SPFx@1.15.2

1. When wbpart added using command webpart added successfully..but problem arise when run using f5

Then id of the newly created webpart added to the manifest.json file as per below SS.When try to run error occure . Error :

2. When try to add webpart by clicking "add new web part" in Teams Toolkit. Below error arise

Thanks for the info. For 1 Could you confirm if you can view all webparts in Teams or sharepoint workbench before when running F5? Or do you try to add a webpart using Teams Toolkit before and remove the generated folder, but does not revert the change in package.json. Basically I am trying to understand why the package.json shows the version is 1.18.1 and can F5 in a 1.15.2 project.

paraggin commented 5 months ago

For 1 : We can see all webpart in Teams Toolkit before adding new webpart and Yes i have tried to add webpart and then remove that generated folder because newly generated webpart not working.

Now how to make this project working with 1.15.2 version

yuqizhou77 commented 5 months ago

For 1 : We can see all webpart in Teams Toolkit before adding new webpart and Yes i have tried to add webpart and then remove that generated folder because newly generated webpart not working.

Now how to make this project working with 1.15.2 version

since you have part dependencies on 1.18 and some on 1.15.2 and it is hard to determine the version of spfx related pacakges in package.json when adding previous webparts, I would recommend to fix the project version issue first before adding new web part. Please run all commands in your spfx src folder (it should be something like {ProjectFolder}/src) Please try the following steps on a new commit to avoid any issues happened and need to revert back.

You could try follow spfx doctor command https://pnp.github.io/cli-microsoft365/cmd/spfx/project/project-doctor to go back the project to 1.15.2 first. m365 spfx project doctor --output md > "doctor-report.md"
Upgrade the project to 1.18 using the spfx upgrade command: https://pnp.github.io/cli-microsoft365/cmd/spfx/project/project-upgrade (You could skip the steps mentioned about updating node engine version in package.json since you are using node 14, but we recommend to upgrade your node version to 16 or 18. You could learn more about node release later https://nodejs.org/en/download/releases) m365 spfx project upgrade --output md > "upgrade-report.md" It will generate a report guiding how to upgrade to 1.18.0
Verify all webparts again
And then install spfx of 1.18.0 version and add a new web part by running the yo command manually
Update manifest.local.json and manifest.json

paraggin commented 5 months ago

All Webpart created Using version 1.15.2. When Webpart Creation Failed I Tried 1.18 version to check webpart Creation.

I tried m365 spfx project doctor --output md > "doctor-report.md" OutPut of the File is :

Invalid Command. Showing Help:

Commands:

help [command...]                                                                           Provides help for a given command.
exit|quit                                                                                   Exits application.
version                                                                                     Shows the current version of the CLI
aad approleassignment add [options]                                                         Adds service principal permissions also known as scopes and app role assignments for specified Azure AD application registration
aad approleassignment list [options]                                                        Lists app role assignments for the specified application registration
aad groupsetting add [options]                                                              Creates a group setting
aad groupsetting get [options]                                     
...........
.........
.......

yuqizhou77 commented 5 months ago

aad approleassignment add [options] Adds service principal permissions also known as scopes and app role assignments for specified Azure AD application registration

This does not look like a output from m365 command. Can you check this page https://pnp.github.io/cli-microsoft365/ and verify the installation?

paraggin commented 5 months ago

doctor-report.md

This is the file generated by Command
m365 spfx project doctor --output md > "doctor-report.md" I follow all the steps as per doctor-report.md file. Error while F5 And below is the Error line Show in the Terminal What should i do next ?

yuqizhou77 commented 5 months ago

2. Upgrade the project to 1.18 using the spfx upgrade command: https://pnp.github.io/cli-microsoft365/cmd/spfx/project/project-upgrade (You could skip the steps mentioned about updating node engine version in package.json since you are using node 14, but we recommend to upgrade your node version to 16 or 18. You could learn more about node release later https://nodejs.org/en/download/releases) m365 spfx project upgrade --output md > "upgrade-report.md" It will generate a report guiding how to upgrade to 1.18.0

Then follow steps as mentioned in https://github.com/OfficeDev/TeamsFx/issues/10412#issuecomment-1824602472. starting from step2

paraggin commented 5 months ago

Followed steps from 1-5 as per given in https://github.com/OfficeDev/TeamsFx/issues/10412#issuecomment-1824602472 All web part works well as expected

Change SPFx 1.15.2 to 1.18.0 Then added new webpart Using Command

Then webpart id added to the manifect.local.json and manifest.json file

Then trying to run using F5 in local machine Below error shown in the terminal

This is the Error line in the two webpart file

yuqizhou77 commented 5 months ago

Followed steps from 1-5 as per given in #10412 (comment) All web part works well as expected

Change SPFx 1.15.2 to 1.18.0 Then added new webpart Using Command

Then webpart id added to the manifect.local.json and manifest.json file

Then trying to run using F5 in local machine Below error shown in the terminal

This is the Error line in the two webpart file

Good to know all web parts work well in 1.18 now! Could you share the content of package.json in src folder now after adding the new web part? The error you provided looks like some dependencies are backed to 1.15.

yuqizhou77 commented 5 months ago

Followed steps from 1-5 as per given in #10412 (comment) All web part works well as expected Change SPFx 1.15.2 to 1.18.0 Then added new webpart Using Command Then webpart id added to the manifect.local.json and manifest.json file Then trying to run using F5 in local machine Below error shown in the terminal This is the Error line in the two webpart file

Good to know all web parts work well in 1.18 now! Could you share the content of package.json in src folder now after adding the new web part? The error you provided looks like some dependencies are backed to 1.15. Looks like you are using 1.15.2 when run yo command to add new web part. Could you install 1.18.0 spfx and run yo command for the new web part?

paraggin commented 5 months ago

This is the package.json file in src folder { "name": "purchage-order", "version": "0.0.1", "private": true, "main": "lib/index.js", "scripts": { "build": "gulp bundle", "clean": "gulp clean", "test": "gulp test" }, "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@fluentui/react": "^8.106.4", "@microsoft/load-themed-styles": "^2.0.83", "@microsoft/sp-adaptive-card-extension-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", "@mui/icons-material": "^5.14.18", "@mui/material": "^5.14.18", "@mui/x-charts": "^6.0.0-alpha.13", "@mui/x-data-grid": "^6.18.1", "bootstrap": "^5.3.2", "react": "17.0.1", "react-dom": "17.0.1", "tslib": "2.3.1", "office-ui-fabric-react": "7.185.7" }, "devDependencies": { "@babel/core": "^7.23.3", "@babel/preset-env": "^7.23.3", "@microsoft/eslint-config-spfx": "1.18.0", "@microsoft/eslint-plugin-spfx": "1.18.0", "@microsoft/rush-stack-compiler-4.5": "0.2.2", "@microsoft/rush-stack-compiler-4.7": "0.1.0", "@microsoft/sp-build-web": "1.18.0", "@microsoft/sp-module-interfaces": "1.18.0", "@rushstack/eslint-config": "2.5.1", "@types/react": "17.0.45", "@types/react-dom": "17.0.17", "@types/webpack-env": "~1.15.2", "ajv": "^6.12.5", "babel-loader": "^9.1.3", "eslint": "8.7.0", "eslint-plugin-react-hooks": "4.3.0", "gulp": "4.0.2", "typescript": "4.7.4", "webpack": "^5.89.0", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.1" } }

Could you please provide solution to created webpart by clicking "Add new Webpart" in right panel of the Teams Toolkit.

paraggin commented 5 months ago

Now works.. Could you please provide solution to created webpart by clicking "Add new Webpart" in right panel of the Teams Toolkit. @yuqizhou77

yuqizhou77 commented 5 months ago

Now works.. Could you please provide solution to created webpart by clicking "Add new Webpart" in right panel of the Teams Toolkit. @yuqizhou77

Nice! I think you will need to upgrade node first to node 16 or node 18. Toolkit will use yo 5 and spfx latest package. We are also reconsidering add web part in Teams Toolkit as it may not work or bring trouble for some users.

OfficeDev / TeamsFx

Webpart Creation Failed in Teams Toolkit #10412