500 error when deploying SvelteKit app to pages

When deploying my SvelteKit app to Cloudflare Pages, it builds without issue but navigating to the site shows my navbar and footer, with an error message of global is not defined in the middle.

Solutions like defining global in the index.html or configuring Vite to define it did not work either.

My understanding is that this error can occur when there are nodejs (cjs) libraries or code trying to run in a non-node environment, however the app seemed to work perfectly when deploying to other JAMstack platforms. The build preview also worked on my machine.

In the console, I get the message Failed to load resource: the server responded with a status of 500 ().

This very sure is not a Cloudflare Pages problem itself, but more likely a problem of the framework/application itself.

A quick google led to:

So basically you would just have to define “global” and you should be good to go.

1 Like

The first article you linked was the one I was referencing. Those solutions didn’t seem to work. In Stack Overflow solutions are similar as well, defining global in the index.html.

I also assumed it was a SvelteKit problem too, but my dev environment works without this error, as does a preview build, as does a deployment to Vercel. Which led me to believe there is an issue with Cloudflare Pages. Is it possible that setting the node version to 17.2 (instead of 18 on my dev env) caused the problem, as using 18 was throwing an error during the Cloudflare Pages build.

Could be, there are two things you should test:

  • running locally the latest v17 of NodeJS.
  • using v17.9.1 at Cloudflare Pages as it is the latest version it supports.

The Devs btw are already working on v18 compatibility but no ETA yet.
I don’t have too much expirience with SvelteKit in particular, but I still think that this is more related to itself, than to Pages.

While this didn’t fix the problem, I’m beginning to think this is a lost cause. Both Cloudflare Pages and SvelteKit have much smaller communities compared to other alternatives, so it’s quite difficult to find people with similar issues.

Thanks for your help!

So I can confirm that if you are using either adapter-auto or adapter-cloudflare, neither use global internally. I just deployed a SvelteKit site the other day and it worked fine, so it’s not a SvelteKit problem.

Therefore this narrows it down to a dependency that you are importing using global (or your code itself). There’s not much you can do other than to find out which dep is using global and look for an alternative, since SvelteKit can polyfill with Vite but it’s a bit difficult with Pages.

As for why it works on other JAMStack platforms, it’s likely that they support global (such as on AWS Lambda or a provider that repackages and resells Lambda under their own name).

That clears up a lot of my confusion.

I had actually just tried deploying another SK site to Cloudflare and it worked just fine. I found the dependency that referenced global was Rellax, a parallax library. Getting rid of it fixed everything so thanks very much for the help!