🐞 VSC TTK Extension First Run Fails due to Upstream Dependency on Yarn

[andrewconnell]

Describe the bug
When performing a first-run experience using a new project created using the Tab > React with Fluent UI template, the process fails. The TeamsFx Cli step fails during the "install dependencies" step reporting:

npm ERR! 'yarn' is not recognized as an internal or external command,

To Reproduce
Steps to reproduce the behavior:

1. Ensure yarn is not installed in your environment
2. Using the latest TTK, create a new Tab > React with Fluent UI project
3. After the project has been created, run debug (F5 / [vsc] Run & Debug > Debug in Teams (browser)
4. Watch the console for errors

Expected behavior
If yarn is a dependency, it should be caught as missing and user instructed it's required. Builds should work.

Screenshots
n/a

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

• OS: macOS (but also reported on Windows 11)
• Version: 5.4.2

CLI Information (please complete the following information):

• OS: macOS
• Version: 2.0.2

Additional context
Appears to be rooted in recent changes in the botbuilder-dialogs NPM package, specifically PR4608.

See log:

Actual error shown near end of the log. Included a snippet from the complete step.

[2024-01-28T15:06:39.572Z] [Info] - Executing lifecycle deploy
[2024-01-28T15:08:44.139Z] [Warning] -  [script action stderr] npm
[2024-01-28T15:08:44.141Z] [Warning] -  [script action stderr]  WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.

[2024-01-28T15:08:44.145Z] [Warning] -  [script action stderr] npm
[2024-01-28T15:08:44.146Z] [Warning] -  [script action stderr]  WARN 
[2024-01-28T15:08:44.148Z] [Warning] -  [script action stderr] deprecated
[2024-01-28T15:08:44.150Z] [Warning] -  [script action stderr]  @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.

[2024-01-28T15:08:44.152Z] [Warning] -  [script action stderr] npm
[2024-01-28T15:08:44.153Z] [Warning] -  [script action stderr]  WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.

[2024-01-28T15:08:44.161Z] [Warning] -  [script action stderr] npm 
[2024-01-28T15:08:44.162Z] [Warning] -  [script action stderr] WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.

[2024-01-28T15:08:44.835Z] [Warning] -  [script action stderr] npm WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility

[2024-01-28T15:08:45.631Z] [Warning] -  [script action stderr] npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.

[2024-01-28T15:08:46.801Z] [Warning] -  [script action stderr] npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser

[2024-01-28T15:08:47.064Z] [Warning] -  [script action stderr] npm WARN deprecated [email protected]: Use your platform's native atob() and btoa() methods instead

[2024-01-28T15:08:48.640Z] [Warning] -  [script action stderr] npm WARN deprecated [email protected]: Use your platform's native DOMException instead

[2024-01-28T15:08:48.839Z] [Warning] -  [script action stderr] npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead

[2024-01-28T15:08:49.016Z] [Warning] -  [script action stderr] npm WARN deprecated [email protected]: Use your platform's native performance.now() and performance.timeOrigin.

[2024-01-28T15:08:53.958Z] [Warning] -  [script action stderr] npm WARN deprecated [email protected]: [email protected]

[2024-01-28T15:09:01.025Z] [Warning] -  [script action stderr] npm
[2024-01-28T15:09:01.026Z] [Warning] -  [script action stderr]  WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.

[2024-01-28T15:09:03.676Z] [Warning] -  [script action stderr] npm 
[2024-01-28T15:09:03.677Z] [Warning] -  [script action stderr] WARN deprecated @azure/[email protected]: A newer major version of this library is available. Please upgrade to the latest available version.

[2024-01-28T15:09:15.294Z] [Warning] -  [script action stderr] npm WARN deprecated @azure/[email protected]: A newer major version of this library is available. Please upgrade to the latest available version.

[2024-01-28T15:10:05.691Z] [Warning] -  [script action stderr] npm WARN cleanup Failed to remove some directories [
npm WARN cleanup
[2024-01-28T15:10:05.693Z] [Warning] -  [script action stderr]    [
npm WARN cleanup     'C:\\Users\\johndoe\\TeamsApps\\hw-react-tab\\node_modules\\core-js-pure',
npm WARN cleanup     [Error: EBUSY: resource busy or locked, rmdir 'C:\Users\johndoe\TeamsApps\hw-react-tab\node_modules\core-js-pure'] {
npm WARN cleanup       errno: -4082,
npm WARN cleanup       code: 'EBUSY',
npm WARN cleanup       syscall: 'rmdir',
npm WARN cleanup       path: 'C:\\Users\\johndoe\\TeamsApps\\hw-react-tab\\node_modules\\core-js-pure'
npm WARN cleanup     }
npm WARN cleanup   ],
npm WARN cleanup   [
npm WARN cleanup     'C:\\Users\\johndoe\\TeamsApps\\hw-react-tab\\node_modules',
npm WARN cleanup     [Error: EPERM: operation not permitted, rmdir 'C:\Users\johndoe\TeamsApps\hw-react-tab\node_modules\@microsoft\microsoft-graph-client\lib\src\tasks'] {
npm WARN cleanup       errno: -4048,
npm WARN cleanup       code: 'EPERM',
npm WARN cleanup       syscall: 'rmdir',
npm WARN cleanup       path: 'C:\\Users\\johndoe\\TeamsApps\\hw-react-tab\\node_modules\\@microsoft\\microsoft-graph-client\\lib\\src\\tasks'
npm WARN cleanup     }
npm WARN cleanup   ],
npm WARN cleanup   [
npm WARN cleanup     'C:\\Users\\johndoe\\TeamsApps\\hw-react-tab\\node_modules\\@microsoft',
npm WARN cleanup     [Error: EPERM: operation not permitted, rmdir 'C:\Users\johndoe\TeamsApps\hw-react-tab\node_modules\@microsoft\recognizers-text-suite\node_modules\@microsoft\recognizers-text-number\dist\types\number'] {
npm WARN cleanup       errno: -4048,
npm WARN cleanup       code: 'EPERM',
npm WARN cleanup       syscall: 'rmdir',
npm WARN cleanup       path: 'C:\\Users\\johndoe\\TeamsApps\\hw-react-tab\\node_modules\\@microsoft\\recognizers-text-suite\\node_modules\\@microsoft\\recognizers-text-number\\dist\\types\\number'
npm WARN cleanup     }
npm WARN cleanup   ],
npm WARN cleanup   [
npm WARN cleanup     'C:\\Users\\johndoe\\TeamsApps\\hw-react-tab\\node_modules\\@azure',
npm WARN cleanup     [Error: EPERM: operation not permitted, rmdir 'C:\Users\johndoe\TeamsApps\hw-react-tab\node_modules\@azure\msal-browser'] {
npm WARN cleanup       errno: -4048,
npm WARN cleanup       code: 'EPERM',
npm WARN cleanup       syscall: 'rmdir',
npm WARN cleanup       path: 'C:\\Users\\johndoe\\TeamsApps\\hw-react-tab\\node_modules\\@azure\\msal-browser'
npm WARN cleanup     }
npm WARN cleanup   ],
npm WARN cleanup   [
npm WARN cleanup     'C:\\Users\\johndoe\\TeamsApps\\hw-react-tab\\node_modules\\@microsoft\\recognizers-text-number-with-unit',
npm 
[2024-01-28T15:10:05.694Z] [Warning] -  [script action stderr] WARN cleanup     [Error: EPERM: operation not permitted, rmdir 'C:\Users\johndoe\TeamsApps\hw-react-tab\node_modules\@microsoft\recognizers-text-number-with-unit\node_modules'] {
npm WARN cleanup       errno: -4048,
npm WARN cleanup       code: 'EPERM',
npm WARN cleanup       syscall: 'rmdir',
npm WARN cleanup       path: 'C:\\Users\\johndoe\\TeamsApps\\hw-react-tab\\node_modules\\@microsoft\\recognizers-text-number-with-unit\\node_modules'
npm WARN cleanup     }
npm WARN cleanup   ]
npm WARN cleanup ]

[2024-01-28T15:10:05.703Z] [Warning] -  [script action stderr] npm ERR! code 1

[2024-01-28T15:10:05.704Z] [Warning] -  [script action stderr] npm ERR! path C:\Users\johndoe\TeamsApps\hw-react-tab\node_modules\botbuilder-dialogs

[2024-01-28T15:10:05.710Z] [Warning] -  [script action stderr] npm ERR!
[2024-01-28T15:10:05.712Z] [Warning] -  [script action stderr]  command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c yarn text-suite && yarn date-time && yarn number-with-unit
npm ERR! 'yarn' is not recognized as an internal or external command,
npm ERR! operable program or batch file.

[2024-01-28T15:10:05.721Z] [Warning] -  [script action stderr] 

[2024-01-28T15:10:05.722Z] [Warning] -  [script action stderr] npm ERR! A complete log of this run can be found in: C:\Users\johndoe\AppData\Local\npm-cache\_logs\2024-01-28T15_06_52_939Z-debug-0.log

[2024-01-28T15:10:06.083Z] [Error] - Failed to Execute lifecycle deploy due to failed action: {"name":"install dependencies","uses":"cli/runNpmCommand"}. ScriptExecutionError:Script ('npm install --no-audit') execution error: npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.
npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.

[MuyangAmigo]

Hi @andrewconnell, I met the same issue. Looks like one of our downstream dependencies (botbuilder-dialogs) added yarn into their scripts. We have reported this issue to our partners and will keep you posted once we have a resolution with them: microsoft/botbuilder-js#4610

Meanwhile, you can manually install yarn to get unblocked: npm i -g yarn

[andrewconnell]

Hi @MuyangAmigo - thanks for validating... I also commented on the root PR that caused this: microsoft/botbuilder-js#4608 (comment)

[facujuarez]

Hi @andrewconnell @MuyangAmigo - Greetings from Argentina.
I have the same issue.
Did you find any alternative to run the project?
Thanks !!!

[andrewconnell]

@facujuarez said:

Did you find any alternative to run the project?

@MuyangAmigo already posted a workaround: #10784 (comment)

FWIW, they already fixed it 👉 microsoft/botbuilder-js#4611

Looks like a new version was published ~1h ago.

[andrewconnell]

#fixed microsoft/botbuilder-js#4611

#closing