Known Issue: F5 failed for Fluent UI Tab & Dashboard Tab

[Yimin-Jin]

Describe the bug
When serving projects using the Vite dev server, if you follow these steps to create a tab template/sample:

1. Create New App -> Tab -> React with Fluent UI
2. Create New App -> Tab -> Dashborad
3. View Samples -> Team Central Dashboard

you may encounter an error page in the browser console when pressing F5, with the following error:

_polyfill-node.process.js:1 Uncaught ReferenceError: global is not defined  
    at _polyfill-node.process.js:1:351  
    (anonymous) @ _polyfill-node.process.js:1  

Screenshots


Cause
The root cause of this issue is that some dependencies assume they are running in a Node.js environment and thus use the Node.js global variable global. However, in a browser environment, this variable is not defined, leading to the global is not defined error.

Workaround
To resolve this issue, you can define the global variable in the vite.config.js file. This workaround ensures compatibility with libraries that rely on Node.js global variables when running in a browser environment.
Here is an example of how to update the vite.config.js:

import { defineConfig } from 'vite';  
import react from '@vitejs/plugin-react';  
  
export default defineConfig({  
  plugins: [react()],  
  define: {  
    global: 'globalThis',  // Define global as globalThis  
  },  
});  

If you need more solutions, you can refer to the GitHub issue. This issue has been discussed in the Vite GitHub discussions: Uncaught ReferenceError: global is not defined when served from vite dev server

VS Code Extension Information

• Version [v5.10.1, v5.11.2024112007 (pre-release)]

Upcoming Fix
We are actively working on a fix for this issue and plan to include it in an upcoming pre-release version, which will be available in the next couple of days.

[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.

[Prasad-MSFT]

@Yimin-Jin, thanks for sharing details about the issue and recommended solution. This will be beneficial to developers who are facing this issue.