Fix the 'Cannot stringify arbitrary non-POJOs' error in SvelteKit

Some background

I recently came across a weird error on one of my SvelteKit project. After returning some data from a load function, I got this weird error both in the browser and in the terminal:

code loading...

I was fetching a user history from the database, so my initial thought was that I was having a database connection error or something related. Turns out, I was wrong.

After a few Google and Stack Overflow searches, I found out a few issues on the SvelteKit repository and some forums threads that put me on the right track.

The issue

SvelteKit load function expect to return Plain Old JavaScript Objects (POJOs ). This means that you can't return a class instance or a function. You can only return a plain object. Some libraries, such as Pocketbase JavaScript SDK (which I was using), can return a class instance on some methods.

That's why I was getting this error. I was returning a class instance from the load function, which is not a POJO.

The solution

Naive approach

The naive approach to fix this issue would be to stringify and then parse the object before returning it from the load function. This works well, and it has the advantage of a well known implementation.

code loading...

Native Node.js 17+ solution

The  structuredClone  global has been added to Node.js versions since 17.0.0 . This function performs a deep clone of the object, which is exactly what we need in this case.

code loading...

And that's it! Now you can return a non POJO object from your load function without any issues.