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

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

Discussion (3)

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 Author

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

Collapse
maximussinclair profile image
Max Sinclair

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