TL:DR
// svelte.config.js
const config = {
preprocess: preprocess(),
kit: {
adapter: adapter(),
target: '#svelte',
// add this π
vite: {
define: {
global: {}
}
}
}
};
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": {},
},
});
Well not quite...
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: {}
}
}
}
};
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)
I ran into a similar problem and your first attempted solution (Vite config) actually worked! Thx man.
Yea, me too.
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 theindex.html
with :But editing
vite.config.ts/js
file works the best! Thanks!Some cases adding this script block in the index.html with:
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.
While this works, it can also break the app at any moment. The following warning is present in the define section of vite config:
What I did to solve this issue was adding a script element in the html file:
Just signed up to dev purely to write this comment saying thanks. Was stuck on this forever!
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?I'm not entirely sure. Technically it should be. If you try it and it works/doesn't work please let me know.
Doing this replaces the "global" folder I have in my project hierarchy by "window" π
I have no idea how to fix
Uncaught ReferenceError: https is not defined at main.ts:4:22