🐞 TTK Errors when building Tab projects with AzFunc backend (Tab > React w/ Fluent UI) 🚨 TS1452: 'resolution-mode' assertions are only supported when moduleResolution is node16 or nodenext.

[andrewconnell]

Describe the bug
When building a new project using the Tab > React w/ Fluent UI > TypeScript template, the Watch Backend task that runs the following npm run watch:teamsfx in the ./api Azure Function subfolder throws a bunch of TypeScript compilation errors that emit from @azure/msal-common, @azure/msal-node, & botframework-streaming packages.

I've observed this on three of my machines (all MacOS, two MacOS v14, one v15) & in multiple student machines (mix of MacOS & Windows).

Confirmed I'm using Node.js v18 & tried running the npm run watch:teamsfx from the ./api folder from a new terminal window.

Click to view errors ❌ in the terminal window output from **Watch Backend**

[3:38:29 PM] Starting compilation in watch mode...

node_modules/botframework-connector/node_modules/@azure/msal-common/lib/types/broker/nativeBroker/INativeBrokerPlugin.d.ts:1:23 - error TS1452: 'resolution-mode' assertions are only supported when `moduleResolution` is `node16` or `nodenext`.

1 /// <reference types="node" resolution-mode="require"/>
                        ~~~~

node_modules/botframework-connector/node_modules/@azure/msal-node/dist/config/Configuration.d.ts:1:23 - error TS1452: 'resolution-mode' assertions are only supported when `moduleResolution` is `node16` or `nodenext`.

1 /// <reference types="node" resolution-mode="require"/>
                        ~~~~

node_modules/botframework-connector/node_modules/@azure/msal-node/dist/config/Configuration.d.ts:2:23 - error TS1452: 'resolution-mode' assertions are only supported when `moduleResolution` is `node16` or `nodenext`.

2 /// <reference types="node" resolution-mode="require"/>
                        ~~~~

node_modules/botframework-connector/node_modules/@azure/msal-node/dist/config/Configuration.d.ts:4:8 - error TS1192: Module '"http"' has no default export.

4 import http from "http";
         ~~~~

node_modules/botframework-connector/node_modules/@azure/msal-node/dist/config/Configuration.d.ts:5:8 - error TS1192: Module '"https"' has no default export.

5 import https from "https";
         ~~~~~

node_modules/botframework-connector/node_modules/@azure/msal-node/dist/request/InteractiveRequest.d.ts:1:23 - error TS1452: 'resolution-mode' assertions are only supported when `moduleResolution` is `node16` or `nodenext`.

1 /// <reference types="node" resolution-mode="require"/>
                        ~~~~

node_modules/botframework-streaming/lib/webSocket/nodeWebSocket.d.ts:8:8 - error TS1259: Module '"/Users/ac/_play/TeamsTabs01/api/node_modules/@types/ws/index"' can only be default-imported using the 'esModuleInterop' flag

8 import WebSocket from 'ws';
         ~~~~~~~~~

  node_modules/@types/ws/index.d.ts:244:1
    244 export = WebSocket;
        ~~~~~~~~~~~~~~~~~~~
    This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.

[3:38:34 PM] Found 7 errors. Watching for file changes.

To Reproduce
Steps to reproduce the behavior:

1. Create a new project using the Tab > React w/ Fluent UI > TypeScript template
2. Start debugging using the Run & Debug > PLAY
3. Watch for the Watch Backend terminal window to launch & fail.
4. Open Watch Backend terminal and observe errors.

Expected behavior
The task Watch Backend runs without errors.

Screenshots
n/a

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

• OS: MacOS v14 & v15
• Version: v5.8.1

CLI Information (please complete the following information):

• OS: MacOS v14 & v15
• Version: v3.0.2

Additional context

Looks related to #12430 ... same workaround in #12430 mitigates this.

[microsoft-github-policy-service]

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.

[Yimin-Jin]

We apologize for this issue. We have released a hotfix today, and it is now available in the Stable version of Teams Toolkit on the marketplace. Please create a new tab template, and it should resolve your issue.

[andrewconnell]

@Yimin-Jin can you clarify which TTK version has the hotfix? I'm having trouble matching up version numbers...

I have the VSC TTK extension v5.8.1 installed & it doesn't show there's an update for it on my side...

... but in the VSC marketplace, it says the latest version released on SEPT 19 is v5.9.2024091807 (as does the version history)...

... but the linked changelog only refers to version v5.8.1.

So it appears I have the latest stable version installed, but I still see this error...

[Yimin-Jin]

Hi @andrewconnell, I apologize for any confusion caused by my previous message. To clarify, we did not release a hotfix for the TTK itself. Instead, we issued a hotfix specifically for the template. Therefore, you will not see any updates for the TTK extension in the marketplace.
You can resolve the issue by creating a new template using the TTK extension version 5.8.1, and you will find that the problem has been addressed.

[andrewconnell]

Confirmed... thanks!