Debugging React with Fluent UI template

[DebasishChaudhuriDVG]

Describe the bug
Simply running teams-toolkit v 5.14 (and 5.14.1) and creating a sample tab app with the React with Fluent UI template errors out while debugging at the deploy stage.

To Reproduce
Steps to reproduce the behavior:

1. Create a teams-toolkit sample tab app with React with Fluent UI template
2. Click on local debug and choose "Debug in teams (Edge)"
3. See error

failed to load config from ..\vite.config.ts
error when starting dev server:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vite' imported from ..\node_modules.vite-temp\vite.config.ts.timestamp-1744638469766-48385f862a37f.mjs
at new NodeError (node:internal/errors:405:5)
at packageResolve (node:internal/modules/esm/resolve:916:9)
at moduleResolve (node:internal/modules/esm/resolve:973:20)
at defaultResolve (node:internal/modules/esm/resolve:1193:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:404:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:373:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:250:38)
at ModuleWrap. (node:internal/modules/esm/module_job:76:39)
at link (node:internal/modules/esm/module_job:75:36)

Vite is present in the package.json but somehow the node modules are being over-written once the deployment process runs via
npm install --no audit and there is no vite in the node modules folder

Expected behavior
The app is ready for preview

Screenshots

VS Code Extension Information (please complete the following information):

• OS: Windows 11
• Version 5.14.1

Additional context
This used to work fine a month ago, hence I went back to the previous version 5.14 from 5.14.1 but still no success. Any help/guidance is highly appreciated. Thanks!

[m365-agent-toolkit-assistant]

👋 Hi @DebasishChaudhuriDVG,

Thank you for reporting this issue! We want to let you know that:

⏱️ Our team will personally review your issue
🎯 You can expect a response within 2 business days

✨ This is an AI-generated initial response
🤖 AI-Generated Preliminary Analysis:

It looks like you're encountering an issue where the Teams Toolkit with the React and Fluent UI template errors out at the deploy stage due to a missing 'vite' package. Here's what you can try:

Troubleshooting Steps

1. Verify vite Installation:

   • Ensure vite is listed in dependencies in your package.json.
   • Manually install it if missing:

     npm install vite --save-dev

2. Clean and Reinstall Node Modules:

   • Remove node_modules and package-lock.json:

     rm -rf node_modules package-lock.json

   • Reinstall dependencies:

     npm install

3. Check vite.config.ts:

   • Verify the path and content of vite.config.ts to make sure the file and imports are correct.

4. Teams Toolkit Version:

   • Ensure you have the latest version of Teams Toolkit. Consider updating if possible.

5. Local Debugging:

   • Retry the Debug in Teams (Edge) process after performing the steps above.

For similar known issues, a frequent cause is related to dependency management and environment setup. If the issue persists, please refer to the GitHub issue tracker for new or similar issues, or file a new issue for detailed support.

Additionally, you can look at this sample code repository for guidance on using Teams Toolkit to create a React app with Fluent UI:
TeamsFx-Samples.

Feel free to reach out with your detailed environment setup and any additional logs if the issue continues.

✨We'd love your feedback! Please take a moment to fill out our survey.

---

Note: This is an automated first response generated by AI. A human team member will review your issue and provide a more detailed response soon. We appreciate your patience!

[sayali-MSFT]

@DebasishChaudhuriDVG ,Thank you for your inquiry about your Teams app development issue!

We are checking the issue. We will get back to you shortly.

[Yimin-Jin]

Hi @DebasishChaudhuriDVG. I tested with Teams Toolkit v5.14.1 but couldn't reproduce the problem. This might be a temporary issue with dependencies. Could you try again and let me know if the problem persists? Thank you!

[DebasishChaudhuriDVG]

Hi Yimin, Thanks for getting back to me. I did try several times (as the case description says) but it does not work unfortunately. However, when I tried on a pristine VM, it worked fine. Also as mentioned, all of these worked fine for me a month ago. Not sure what has caused this. I colleague of mine also has the same problem. If possible, I can be on a screenshare session with you to investigate better. Thanks again! Debasish

…

________________________________ From: Yimin-Jin ***@***.***> Sent: Monday, April 21, 2025 10:24 PM To: OfficeDev/teams-toolkit ***@***.***> Cc: Debasish Chaudhuri ***@***.***>; Mention ***@***.***> Subject: Re: [OfficeDev/teams-toolkit] Debugging React with Fluent UI template (Issue #13689) Hi @DebasishChaudhuriDVG<https://github.com/DebasishChaudhuriDVG>. I tested with Teams Toolkit v5.14.1 but couldn't reproduce the problem. This might be a temporary issue with dependencies. Could you try again and let me know if the problem persists? Thank you! — Reply to this email directly, view it on GitHub<#13689 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BEK7I5VPJTV4AVTU6Z53K5T22WR7TAVCNFSM6AAAAAB3DCAPNCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQMJZHA4TIMZXG4>. You are receiving this because you were mentioned.Message ID: ***@***.***> [https://avatars.githubusercontent.com/u/139844715?s=20&v=4]Yimin-Jin left a comment (OfficeDev/microsoft-365-agents-toolkit#13689)<#13689 (comment)> Hi @DebasishChaudhuriDVG<https://github.com/DebasishChaudhuriDVG>. I tested with Teams Toolkit v5.14.1 but couldn't reproduce the problem. This might be a temporary issue with dependencies. Could you try again and let me know if the problem persists? Thank you! — Reply to this email directly, view it on GitHub<#13689 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BEK7I5VPJTV4AVTU6Z53K5T22WR7TAVCNFSM6AAAAAB3DCAPNCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQMJZHA4TIMZXG4>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[Yimin-Jin]

Hi @DebasishChaudhuriDVG. You can try moving vite (and its plugins) from devDependencies into dependencies. By default, npm i --no-audit installs both dependencies and devDependencies. However, if you use the --production flag or set NODE_ENV=production, it will only install dependencies and skip devDependencies.

[DebasishChaudhuriDVG]

Hi Yimin, Thank you so much for the tip. That worked for me. Regards, Debasish

…

________________________________ From: Yimin-Jin ***@***.***> Sent: Wednesday, April 23, 2025 4:35 AM To: OfficeDev/teams-toolkit ***@***.***> Cc: Debasish Chaudhuri ***@***.***>; Mention ***@***.***> Subject: Re: [OfficeDev/teams-toolkit] Debugging React with Fluent UI template (Issue #13689) Hi @DebasishChaudhuriDVG<https://github.com/DebasishChaudhuriDVG>. You can try moving vite (and its plugins) from devDependencies into dependencies, since npm install --no‑audit only installs dependencies. — Reply to this email directly, view it on GitHub<#13689 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BEK7I5RJICUQFCRXI6OLFN3225GDRAVCNFSM6AAAAAB3DCAPNCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQMRTGQ4TKOBQGU>. You are receiving this because you were mentioned.Message ID: ***@***.***> [https://avatars.githubusercontent.com/u/139844715?s=20&v=4]Yimin-Jin left a comment (OfficeDev/microsoft-365-agents-toolkit#13689)<#13689 (comment)> Hi @DebasishChaudhuriDVG<https://github.com/DebasishChaudhuriDVG>. You can try moving vite (and its plugins) from devDependencies into dependencies, since npm install --no‑audit only installs dependencies. — Reply to this email directly, view it on GitHub<#13689 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BEK7I5RJICUQFCRXI6OLFN3225GDRAVCNFSM6AAAAAB3DCAPNCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQMRTGQ4TKOBQGU>. You are receiving this because you were mentioned.Message ID: ***@***.***>