Uncaught ReferenceError: global is not defined when served from vite dev server

[olejorgenb]

After trying out storybook in my project (not possible to share the code) my browser crashes when using the vite dev server:

index.js:3 Uncaught ReferenceError: global is not defined
    at ../../node_modules/get-intrinsic/node_modules/has-symbols/index.js (index.js:3)
    at __require2 (chunk-VPFHXPC5.js?v=c681eaee:36)
    at ../../node_modules/get-intrinsic/index.js (index.js:45)
    at __require2 (chunk-VPFHXPC5.js?v=c681eaee:36)
    at ../../node_modules/call-bind/callBound.js (callBound.js:3)
    at __require2 (chunk-VPFHXPC5.js?v=c681eaee:36)
    at ../../node_modules/is-arguments/index.js (index.js:4)
    at __require2 (chunk-VPFHXPC5.js?v=c681eaee:36)
    at ../../node_modules/deep-equal/index.js (index.js:2)
    at __require2 (chunk-VPFHXPC5.js?v=c681eaee:36)

When running the full build (vite build) no error occurs.

Tracing back the imports I find that the addition of "@storybook/react": "^6.4.1" to my packages.json somehow caused has-symbols version 1.0.1 to be imported*. which include this top-level code: var origSymbol = global.Symbol;

Digging further I find that this has been fixed in 1.0.2 by the has-symbols maintainer after quite some resistance:

This is not needed; all working bundlers transform global to window. ref

and

All that would achieve is to make it slightly easier for bundlers to do the wrong thing. You'll still find yourself suffering due to another package - it'd just move the problem.

That said, it's fair that the typeof version would work identically, so I suppose I'll go ahead and do it. I strongly suggest you also spend effort trying to fix the broken node module bundlers that fail to polyfill global. ref

When searching for this issue I found at least a couple other libraries which caused the same issue. Some of the vite github issues recommend simply shimming global to window in index.html, but this feels quite wrong to me. Is this the preferred solution?

The has-symbols maintainer sure seems to think this is the responsibility of the bundler and since the full (bundled) vite build work, I guess vite agree? **

It's a bit worrying that such large differences can happen between the full and development build. And if it's semi-common for libraries to (rightly?) rely on the bunder to resolve this nodejs - browser compatibility thing, isn't it a problem worth addressing? Or at least documenting the best solution. The only reference I find is this which say what not do to without further elaboration.

It would have saved me a couple hours debugging at least :)

Is it possible to force certain modules to be prebundled?

* I gave up finding the exact causal link in my yarn.lock file 😵‍💫 (if anyone know of good tooling which make such digging easier I'm all ears)

** I guess it could also be due to some optimization/code splitting which cause the "offending" library to not be imported

[Niputi]

• you can force a newer version sub dependencies which are outdated
• Vite is not going to add polyfills for nodejs builtins
• global is a node builtin which libraries should not depend on
• you will need to add a polyfill for global if you have dependencies which are not browser friendly

please open a issue at storybook regarding that outdated dependency

[gamliela]

Not sure why this answer is downvoted so much. It's clearly a problem in storybook dependency, and this answer provides a few good workarounds. One of the problems of Javascript eco-system is that tooling are getting "too smart" - making them flaky and hard to maintain. I think Vite is taking the right approach of not solving problems that should be solved elsewhere.

[danvc]

Probably because GitHub is becoming the next Stackoverflow

[tkrugg]

For anyone landing here, I got it fixed by adding this to my vite.config.ts

export default defineConfig({
  plugins: ...
  esbuild: ...

  define: {
    // By default, Vite doesn't include shims for NodeJS/
    // necessary for segment analytics lib to work
    global: {},
  },
})

[SchDen]

@nnzo I don't remember what exactly help me to solve it, but you can just try parts of my config. I think you should pay attention to global: 'globalThis'.

vite.config.js

import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue2';
import Graphql from '@rollup/plugin-graphql';
import EnvironmentPlugin from 'vite-plugin-environment';
import ViteRequireContext from '@originjs/vite-plugin-require-context';
import * as path from 'path';

export default defineConfig({
    outDir: process.env.NODE_ENV,
    server: {
        port: 8011,
        fs: {
            strict: false,
        },
    },
    plugins: [
        ViteRequireContext(),
        Vue(),
        Graphql(),
        EnvironmentPlugin('all'),
    ],
    resolve: {
        alias: [
            // Fix the SCSS modules
            { find: /^~(.*)$/, replacement: '$1' },
            { find: '@', replacement: path.resolve(__dirname, 'src') },
        ],
    },
    optimizeDeps: {
        esbuildOptions: {
            // Node.js global to browser globalThis
            define: {
                global: 'globalThis',
            },
        },
    },
    css: {
        preprocessorOptions: {
            scss: {
                quietDeps: true,
            },
        },
        postcss: {
            plugins: [
                // eslint-disable-next-line global-require
                require('autoprefixer'),
            ],
        },
    },
});

[TimDaub]

This is not a good method to fix this issue as define renames all "global" to "{}". E.g. I use "@safe-globa/..." and it then rewrites that import path and breaks my app. If you use "global" anywhere it will break your app. It's funny that this hasn't been moderated yet, it is clearly completely wrong

[magnus-bakke]

@SchDen's solution works for me when running the dev server, but not when building and serving using Nginx

[Ashraf-ul-I]

Thanks brother it works. Take love.

[ashishnex007]

tysm 🙏

[Terkea]

The following vite.config.ts worked for me

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import viteTsconfigPaths from "vite-tsconfig-paths";
import svgrPlugin from "vite-plugin-svgr";

// https://vitejs.dev/config/
export default defineConfig({
    // https://github.com/vitejs/vite/issues/1973
    define: {
        // "process.env": process.env,
        // // By default, Vite doesn't include shims for NodeJS/
        // // necessary for segment analytics lib to work
        "global": {},
    },
    resolve: {
        alias: {
            process: "process/browser",
            buffer: "buffer",
            crypto: "crypto-browserify",
            stream: "stream-browserify",
            assert: "assert",
            http: "stream-http",
            https: "https-browserify",
            os: "os-browserify",
            url: "url",
            util: "util",
        },
    },
    plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
});

[hamdi-islam]

for React.js i've added the following to my index.html

<script>
    if (global === undefined) {
      var global = window;
    }
  </script>

[TimDaub]

this is the correct answer and not to define "global" in the config!

[ItsTonyDavid]

I can say that this worked for me using Vite and React :)

[aprilmintacpineda]

This is the correct workaround.

[phanthanhluc24]

Thank you so much

[lhovee]

Got this from someone else, but this works as well. The problem I had was that not having define: global: {} broke my local and then having it broke builds on AWS Amplify. This polyfill in index.html works for both.

<!-- Polyfill for Amplify -->
<script>
  var global = global || window;
  var Buffer = Buffer || [];
  var process = process || {
    env: {
      DEBUG: undefined
    },
    version: []
  };
</script>

[zbyte64]

I found "define" to be very aggressive, even rewriting imports like ../utils/global ; this method seems to work well.

[quiet-ocean]

Sometimes we have 2 errors related to varialble global

1: global is not define
2. _global is not define

When we encountered these 2 errors in vite.js, we can resolve by:
`

export default defineConfig({
  build: {
    sourcemap: true,
  },
  define: {
    _global: {},
  },
  plugins: [react(), EnvironmentPlugin(['VITE_APP_TEXT'])],
  publicDir: 'public',
  resolve: {
    alias: [{ find: '@', replacement: resolve(__dirname, 'src') }],
  },
  server: {
    host: true,
    port: 3000,
  },
})

and updateindex.html` by:

if (typeof window !== "undefined") {
    window.global = window;
}

[sundaram2021]

I have defined global to 'globalThis' and after that it works fine

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define: {
    global: 'globalThis'
  }  
})

[JayDouglass]

This is the one that worked for me. It works locally and in production.

[lediokoci1]

It worked also for me. Thank you buddy!

[jaemdessources]

So simple and yet it worked for me on the first try.

[Kane-R-G]

Legend this worked for me.

[Jisan901]

simpl solutions for module
Add on vite config

resolve: {
    alias: {
      "socket.io-client": "socket.io-client/dist/socket.io.js",
    },
  },

[Duzbee]

I certainly didn't expect this last reply to work for me, but it did. Thank you!
I'm using nuxt 3 and got this error from the worker generated by the nitro server for cloudflare pages.

[524c]

I can confirm that it also solved the problem for me. Thanks!

[sergioisidoro]

A note to all using define - it will replace the name "global" in package imports as well -- #12814