App hungs up: global is not defined

[karamem0]

Version

• @microsoft/[email protected]
• @vitejs/[email protected]
• [email protected]
• [email protected]

Description
I got an error when I update @microsoft/teams-js version from 2.23.0 to 2.31.1.

@microsoft_teams-js.js?v=26283b24:352 Uncaught ReferenceError: global is not defined
    at @microsoft_teams-js.js?v=26283b24:352:1
(anonymous) @ @microsoft_teams-js.js?v=26283b24:352

[sayali-MSFT]

@karamem0 -Thank you for your inquiry about your Teams app development issue!

To assist you better, could you please provide the following details?

1. Reproduction Steps: Please share the steps you took to encounter the issue.
2. Teams Client Version: What version of the Teams client are you using?
3. Code Snippets: Relevant code snippets that illustrate the issue.
4. Manifest Package: If applicable, please share the manifest package for your app.

This information will help us better understand the situation and provide a more accurate response.

[sebiJo]

Same here with @microsoft/teams-js 2.31.1
Everything works fine in 2.30.0

2.31.1 is not usable at the moment

[riskysciolism]

Same problem in our vue project.
Please check the console in this minimal example project.
https://stackblitz.com/edit/vitejs-vite-2uxzdy?file=src%2FApp.vue

[noahdarveau-MSFT]

Hi. While we are actively looking into this issue, we believe version 2.31.0 should work without this issue. Could you please try out that version in the meantime and let us know if you are continuing to run into the issue.

[riskysciolism]

2.31.0 works. I assume the bug was introduced by packages/teams-js/jest-setup.cjs.

[aoneahsan]

[SOLUTION-EXPLAINED]
add this in your "vite.config.ts" file (or other respective file, with respective syntax)
define: { ... other definations, global: {} }

[PROBLEM]
the error is shown below

it happened because of

i tried multiple different versions

but same error with all these versions, we would not have received this error if here we first check if "global" is a object, and then try to get key from it

like this
global && typeof global == 'object' && "function" == typeof global.setTimeout && (r4 = setTimeout), "function" == typeof global.clearTimeout && (n4 = clearTimeout);

or we simply use null-safety check, like this
"function" == typeof global?.setTimeout && (r4 = setTimeout), "function" == typeof global?.clearTimeout && (n4 = clearTimeout);

second one is better and easier to understand, and we will not receive the error as well.

well for now, add the solution mentioned in "vite.config.ts", and hopefully package team will update it soon.

[riskysciolism]

Adding define: { global: {} } to our vite.config.ts is not an option, as it somehow breaks our proxy websocket configuration for the dev environment.

[noahdarveau-MSFT]

Hi all, we've put out a beta release which should resolve the issues you're having. Please try it out and let us know if you continue to run into any issues. Thanks!

[atymic]

Same issue here. How long until master is tagged with the fix?

[victordas]

Hi all, we've put out a beta release which should resolve the issues you're having. Please try it out and let us know if you continue to run into any issues. Thanks!

This has another issue: Uncaught TypeError: Cannot read properties of undefined (reading 'fd') node.js:1

[noahdarveau-MSFT]

Hi @victordas, we are aware of this issue and working on a fix. @atymic the next main release to go out will be early next week as we have a company wide release freeze this week for the holidays. I'll be sure to keep this thread updated when it goes out.

[noahdarveau-MSFT]

Hi all, we have a beta release out, v2.32.0-beta.2, which should contain the fixes for both issues mentioned in the thread. Please try it out and let us know if you are continuing to see any issues.

[victordas]

Hi all, we have a beta release out, v2.32.0-beta.2, which should contain the fixes for both issues mentioned in the thread. Please try it out and let us know if you are continuing to see any issues.

I am unable to proceed with it

[noahdarveau-MSFT]

Thank you @victordas for letting us know. This issue stems from polyfill code in a 3rd party library that we do not own unfortunately, so it may take us some time to come up with a shippable fix that lives in our codebase. In the meantime, I believe adding

optimizeDeps: {
    esbuildOptions: {
      define: {
        global: 'globalThis',
      },
    },
  },

to your vite.config.js may resolve the issue for you. Please let us know if it does. We appreciate your patience while we deal with this issue.

[victordas]

Thank you @victordas for letting us know. This issue stems from polyfill code in a 3rd party library that we do not own unfortunately, so it may take us some time to come up with a shippable fix that lives in our codebase. In the meantime, I believe adding

optimizeDeps: {
    esbuildOptions: {
      define: {
        global: 'globalThis',
      },
    },
  },

to your vite.config.js may resolve the issue for you. Please let us know if it does. We appreciate your patience while we deal with this issue.

I get the following error with those changes
#2639 (comment)

Here's my vite.config.ts

import { defineConfig } from "vite";
import configure from "./vite";

// Use the defineConfig helper which should provide intellisense
// without the need for jsdoc annotations.
export default defineConfig((env) => {
    const baseConfig = configure(env); // Call configure with the environment object
  
    return {
      ...baseConfig,
      optimizeDeps: {
        esbuildOptions: {
          define: {
            global: "globalThis", // Add globalThis mapping
          },
          ...(baseConfig.optimizeDeps?.esbuildOptions || {}), // Merge existing esbuildOptions
        },
        ...(baseConfig.optimizeDeps || {}), // Merge any other optimizeDeps settings
      },
    };
  });
  

[noahdarveau-MSFT]

Hi all. v2.32.0-beta.3 has been released and should resolve this issue. Once again, please try it out and let me know if you continue to see ongoing issues and I appreciate everyone's patience while we deal with this rather tricky issue.

[adamreisnz]

Unfortunately it doesn't look like v2.32.0-beta.3 has fixed this problem:

➤ YN0085: │ + @microsoft/teams-js@npm:2.32.0-beta.3
➤ YN0085: │ - @microsoft/teams-js@npm:2.32.0

Loading the app still results in the same error:

Uncaught ReferenceError: global is not defined
    at @microsoft_teams-js.js?v=665bb21a:515:36

2.31.0 works ok.

[noahdarveau-MSFT]

Hi @adamreisnz, Thank you for the info. Just to clarify, did you also implement the workaround changes to your vite.config outlined in this comment alongside v2.23.0-beta-3.

[adamreisnz]

Ah, thanks @noahdarveau-MSFT , I missed that comment. It appears to work with 2.23.0 and that specific Vite config now, thank you 🎉

[karamem0]

It works for me too.

[adamreisnz]

Actually, while it works in dev, when I use Vite to build for production, the suggested optimizeDeps configuration doesn't seem to help and the production build errors with the same ReferenceError: global is not defined.

I will revert the version again for now.

[noahdarveau-MSFT]

Hi @adamreisnz. Interesting that it is working for you in dev but, the issue continues to persist in prod. Since we are getting reports from other package consumers that the issue is resolved for them, could you please do some investigation on your end as to why this issue is persisting for you in prod, but not in dev. Thanks.

[adamreisnz]

Hello @noahdarveau-MSFT ,

I have created a minimal reproduction repo for you here: https://github.com/adamreisnz/teams-js-reproduction
I believe I have done everything as expected, using v 2.32.0, and with the relevant esbuildOptions.

Reproduction is easy:

1. Clone repository
2. Run yarn to install dependencies
3. Run yarn dev to start development server
4. Observe that this runs without errors
5. Run yarn build to create a production build
6. Run yarn preview to start a server with the production build
7. Observe Uncaught ReferenceError: global is not defined in console

The app works fine in Vite dev mode, but when building for production and trying to run that, it displays the same error.

I don't know why other teams are reporting that it is working. Perhaps they did not try to deploy to production yet over the holidays 😉

Hope this helps you reproduce it on your end.

[TrevorJoelHarris]

I'm very new to vite, but poking around in their documentation and on stack overflow it sounds like the optimizeDeps option only applies to dev builds and not production ones. While there are production options that you can use to do something similar, I'm also seeing a lot of people warn that this can cause problems in vite when you are trying to replace something that could have the name changes as part of a minification process.

One suggestion I'm seeing that might be interesting (from https://stackoverflow.com/a/73208485):

The problem is because vite doesn't define a global field in window as webpack does. And some libraries relies on it since webpack is much more older than vite.

Just insert at the very start, before any library import:

// init.js
window.global ||= window;

A good way to have the above code before any import is to write in new file, let's call it init.js, and import it as first.

// in index.js or main.js file

import "./init"
// import your app and libraries after... 
import App from './App'
import ...

After playing around with this for a few minutes I haven't yet gotten it to work (although that could have been my inexperience with vite). I'll keep playing with this, but could you try something like that and see if it works?

(Btw if you are curious it seems like the root problem is that we provide a polyfill of the buffer package, and that polyfill assumes that global has been defined, which vite does not do by default)