search

OfficeDev / TeamsFx

Developer tools for building Teams apps
Other
427 stars 165 forks source link

bug report: SPFx.SPFxScaffoldError #4600

Closed binfouzan closed 2 years ago

binfouzan commented 2 years ago

Exec command: "yo @ --skip-install true --component-type webpart --component-name TL --framework react --solution-name TimeAndLabor --environment spo --skip-feature-deployment true --is-domain-isolated false" timeout, 120000 ms

stack: SPFxScaffoldError: Exec command: "yo @ --skip-install true --component-type webpart --component-name TL --framework react --solution-name TimeAndLabor --environment spo --skip-feature-deployment true --is-domain-isolated false" timeout, 120000 ms at Object.ScaffoldError (:2:6481412) at SPFxPluginImpl.postScaffold (:2:6501266) at SpfxPlugin.runWithErrorHandling (:2:6488168) at SpfxPlugin.postScaffold (:2:6487396) at Object.scaffoldSourceCodeAdapter (:2:6607383) at SpfxPluginV2.scaffoldSourceCode (:2:6524327) at TeamsAppSolutionV2.scaffoldSourceCode (:2:6979727) at FxCore.createProjectV2 (:2:5129245) at FxCore. (:2:5250167) at FxCore.exports.ProjectSettingsWriterMW (:2:5304764) at FxCore.exports.ContextInjectorMW (:2:5238494) at FxCore.exports.QuestionModelMW (:2:5310976) at FxCore.exports.ErrorHandlerMW (:2:5253291)

ghost commented 2 years ago

Thank you for contacting us! Any issue or feedback from you is quite important to us. We will do our best to fully respond to your issue as soon as possible. Sometimes additional investigations may be needed, we will usually get back to you within 2 days by adding comments to this issue. Please stay tuned.

HuihuiWu-Microsoft commented 2 years ago

Hi @binfouzan, it timed out to execute the 'yo @microsoft/sharepoint' command to scaffold spfx project from the error stack. The timeout is set to be 120s and it takes less than 10s for most of cases on my side. Can you help confirm whether it's reproducible on your side?

binfouzan commented 2 years ago

hi @HuihuiWu-Microsoft, I found out that I have spfx 1.12 and teamsfx installed globally, I had to uninstall both. after that, I was able to scaffold the spfx project but when I run it, it give me an error "something went wrong"

I am using osx, I had to downgrade to teams tool kit 3.6.1

HuihuiWu-Microsoft commented 2 years ago

hi @HuihuiWu-Microsoft, I found out that I have spfx 1.12 and teamsfx installed globally, I had to uninstall both. after that, I was able to scaffold the spfx project but when I run it, it give me an error "something went wrong"

I am using osx, I had to downgrade to teams tool kit 3.6.1

Teams Toolkit will not install spfx globally, it will be installed under HOME/.fx locally and use locally installed version(spfx v1.14.0) for scaffolding. So it doesn't matter what the global version is. Could you give more details about the error "something went wrong"?

binfouzan commented 2 years ago

I am receiving this error now:

Error Loading Debug manifests Error loading debug script.Ensure the server is running and the "debugeManifestsFile" parameter URL is correct.

Error: Script error for: https://localhost:4321/temp/manifests.js http://requirejs.org/docs/errors.html#scripterror

HuihuiWu-Microsoft commented 2 years ago

I am receiving this error know:

Error Loading Debug manifests Error loading debug script.Ensure the server is running and the "debugeManifestsFile" parameter URL is correct.

Error: Script error for: https://localhost:4321/temp/manifests.js http://requirejs.org/docs/errors.html#scripterror

@binfouzan This error should happen when local debugging. So you've scaffolded spfx project successfully, right?

For this error, did you meet the issue while debugging hosted workbench? Please check whether gulp serve runs successfully. It would be better if you can attach a screenshot.

binfouzan commented 2 years ago

yes, I scaffolded spfx project. no, I meet the issue while debugging teams workbench

HuihuiWu-Microsoft commented 2 years ago

debugging teams wor

Can you help check whether gulp serve is running successfully while you do Teams workbench debugging? Is this issue reproducible?

binfouzan commented 2 years ago

i am attaching a screenshot

  1. this is when I am debugging in Teams workbench:

    gulp

  2. and this when I am debugging in hosted workbench:

    gulp 02

  3. when I run gulp in the project directory: % pwd /Users/xxxxxx/source/MSTeams/HelloWorld/SPFx % gulp --tasks zsh: command not found: gulp % gulp trust-dev-cert zsh: command not found: gulp

HuihuiWu-Microsoft commented 2 years ago

Hi @binfouzan, I'd like to confirm with you which Teams Toolkit version you're using to scaffold this project (You said you have to downgrade to v3.6.1 to scaffold) and which version you're using to do debugging?

binfouzan commented 2 years ago

hi @HuihuiWu-Microsoft I upgraded again to 3.7.0 so i can follow up with you

teamkitversipn

and this is what I have installed globally: /Users/xxxxx/.nvm/versions/node/v14.18.0/lib ├── create-react-app@5.0.0 ├── npm@8.0.0 ├── to@0.2.9 └── update@0.7.4

and this is node and npm version : % node --version v14.18.0 % npm --version 8.0.0

binfouzan commented 2 years ago

Hi @HuihuiWu-Microsoft

I found this error in the debugging console when debugging on the host workbench (on Edge)

Failed to load debug manifests: Error: Script error for: https://localhost:4321/temp/manifests.js

so I opened a new tab and load https://localhost:4321/temp/manifests.js manually , and I can see the sample web part

hosted workbench

but when I try debugging with the host workbench on chrome ( after removing all globally installed packages) it worked without loading the manifests file manually

HuihuiWu-Microsoft commented 2 years ago

Hi @binfouzan , I'm trying to summarize the issues you have met: For hosted workbench debugging:

  1. The following error should be due to unsuccessfully launch of gulp task, pls make sure gulp serve is running successfully and the localhost:4321 is hosting the resources correctly: image
  2. The following operation shouldn't be done manually, you can do debugging via vscode debug tab and gulp will be installed automatically when I run gulp in the project directory: % pwd /Users/xxxxxx/source/MSTeams/HelloWorld/SPFx % gulp --tasks zsh: command not found: gulp % gulp trust-dev-cert zsh: command not found: gulp
  3. Supported npm version for SPFx v1.14.0 is v6.x. Not sure if the 'Failed to load debug manifests' error is due to that but I suggest you to use correct version and try again. For Teams workbench debugging, please also use correct npm version and try again.
binfouzan commented 2 years ago

Hi @HuihuiWu-Microsoft i was able to get it to work with the following steps :

  1. create a new project
  2. run and debuge with Teams Workbench (will fail because of glup issue)
  3. open an new tab in the browser and load https://localhost:4321/temp/manifests.js manually
  4. reload teams tab on the browser
  5. the webpart load fine in teams

i only need to load the manifest file once.

HuihuiWu-Microsoft commented 2 years ago

Hi @binfouzan , I'll close this issue since you get it working now. Suggest you to use officially supported versions to avoid any unexpected issues.