After months of free Svelte/SvelteKit consulting calls, we are discontinuing this service on September 30 to better focus on our paid clients. Check out our sprint-based Svelte/SvelteKit development if you need quality web apps built fast. Thanks for understanding as we make this change to improve service.

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

Justin's profile pic

Justin Ahinon

Last updated on

Table of Contents

    Enter your email to get this article emailed to you

    Get this article emailed to you .

    SvelteKit version: 1.3.1

    This is the first post for the "Tips " category on this blog. Tips are intended to be short and succinct posts, proving a quick, self-contained solution to a problem.

    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:

    Error in the browser Error in the console
    BASH

    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.

    TYPESCRIPT

    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.

    TYPESCRIPT

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

    You might also like these blog posts

    SvelteKit Internals: Load function

    SvelteKit Internals: Load function

    Discover how SvelteKit's load function simplifies data loading in your web app.

    Taking advantage of query parameters in SvelteKit

    Taking advantage of query parameters in SvelteKit

    Master the art of query parameters in SvelteKit! Discover how to access and use them on both the client and server side with clear examples and explanations.