DEV Community

Cover image for How to fix the ReferenceError: global is not defined error in SvelteKit/Vite
Richard Oliver Bray
Richard Oliver Bray

Posted on

How to fix the ReferenceError: global is not defined error in SvelteKit/Vite

#svelte #sveltekit #vite #webdev

TL:DR 



// svelte.config.js
const config = {
    preprocess: preprocess(),
    kit: {
        adapter: adapter(),
        target: '#svelte',
        // add this 👇
        vite: {
            define: {
                global: {}
            }
        }
    }
};
Enter fullscreen mode Exit fullscreen mode

I spent hours trying to figure this out and it was really difficult to find the exact information on the web since this error message is very similar to an Angular issue. However, the Angular solution is useless for SvelteKit so, I thought I'd put this post together.

SvelteKit is currently in beta so who knows, maybe they might address this at some point in the future but anyway...

SvelteKit uses Vite as its build tool which is great because Vite pre-bundles dependencies using esbuild which is really really fast. But by default, Vite doesn't include shims for NodeJS variables so these need to be added by the user.

That sound simple enough to fix, just create a vite.config.[js/ts] file, add it to your SvelteKit project and define global right?



// vite.config.ts
export default defineConfig({
  define: {
    "global": {},
  },
});
Enter fullscreen mode Exit fullscreen mode

Well not quite...

Adding a vite config to sveltekit is not a good idea

This would usually be fine but SvelteKit doesn't play ball with a Vite config file, it will instead ask you to put the changes in a svelte.config.file. Makes sense I guess🤷?

Apart from the fact that a svelte config looks different from a vite config so it's not as simple as just copying and pasting into the main config object. Following the link in the error take you here -> https://kit.svelte.dev/docs#configuration-vite which isn't super useful. But after a bit of googling I found this much more helpful example albeit on a different topic but it was good enough.

And... that's what lead to the working solution below:



// svelte.config.js
const config = {
    preprocess: preprocess(),
    kit: {
        adapter: adapter(),
        target: '#svelte',
        // add this 👇
        vite: {
            define: {
                global: {}
            }
        }
    }
};
Enter fullscreen mode Exit fullscreen mode

I should also mention I'm quite new to Svelte so there is a huge chance someone will call me out in the comments and add a much more elegant solution 😜

Sources

https://github.com/vitejs/vite/issues/2778
https://github.com/vitejs/vite/issues/728
https://github.com/bevacqua/dragula/issues/602
https://kit.svelte.dev/faq#aliases

Top comments (10)

Collapse
 
whamsicore profile image
Payton •

I ran into a similar problem and your first attempted solution (Vite config) actually worked! Thx man.

Collapse
 
noconsulate profile image
Janssen Kuhn •

Yea, me too.

Collapse
 
kvikram profile image
K. Vikram • • Edited

The editing Vite (React + TS) config works like a charm. Earlier I was using this workaround (github.com/aws-amplify/amplify-js/...) by adding this script block in the index.html with :

  <script>
    if (global === undefined) {
      var global = window;
    }
  </script>
Enter fullscreen mode Exit fullscreen mode

But editing vite.config.ts/js file works the best! Thanks!

Collapse
 
issmailbasel profile image
Basel Issmail •

Some cases adding this script block in the index.html with:

  <script>
    if (global === undefined) {
      var global = window;
    }
  </script>
Enter fullscreen mode Exit fullscreen mode

is the better option, my vitest breaks if I change the config as mentioned in the article, and it seems to be a harder solution to solve depending on what I researched online.

Collapse
 
tfoxy profile image
Tomás Fox •

While this works, it can also break the app at any moment. The following warning is present in the define section of vite config:

Because it's implemented as straightforward text replacements without any syntax analysis, we recommend using define for CONSTANTS only.

For example, process.env.FOO and __APP_VERSION__ are good fits. But process or global should not be put into this option. Variables can be shimmed or polyfilled instead.

What I did to solve this issue was adding a script element in the html file:

    <script>
      // Fix `global is not defined` error
      global = window
    </script>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
maximussinclair profile image
Max Sinclair •

Just signed up to dev purely to write this comment saying thanks. Was stuck on this forever!

Collapse
 
jackkeller profile image
Jack Keller •

I've had to do some wonky things to get access to window with a similar ReferenceError, would this be a similar fix via Vite?

Collapse
 
richardbray profile image
Richard Oliver Bray • • Edited

I'm not entirely sure. Technically it should be. If you try it and it works/doesn't work please let me know.

Collapse
 
muffincode profile image
Camille Fite •

Doing this replaces the "global" folder I have in my project hierarchy by "window" 😭
I have no idea how to fix

Collapse
 
taxirov profile image
Saad Takhir •

Uncaught ReferenceError: https is not defined at main.ts:4:22

Read next

probir-sarkar profile image

Next.js Interview Mastery: Essential Questions 61-70 (Part 7)

Probir Sarkar -

riz007 profile image

When Scalability Meets Spectacle: Lessons from Netflix's Tyson-Paul Fight Crash

Rizwanul Islam Rudra -

gladiatorsbattle profile image

How to Kickstart Your Web Development Journey in 2024: A Comprehensive Guide

Gladiators Battle -

spicecoder profile image

Hierarchical Flattening: The Secret to Managing Complexity in Software Design

pronab pal -