Returning objects with decimal properties from +page.server.ts load causes error

[ieedan]

Describe the bug

I am trying to use Prisma and SvelteKit and when I try to return an object or array of objects with a property with a decimal value I get the following error:

Error: Data returned from load while rendering / is not serializable: Cannot stringify arbitrary non-POJOs (propertyName)

The object I am trying to return logs to this:

[
  {
    id: 'e290ca8b-b763-4782-af1d-bc4b2f9160c4',
    name: 'Mouse',
    description: 'Mousey mouse',
    price: 12.99
  }
]

+page.server.ts

export async function load() {
    let products: Product[] = [];
    try {
        products = await prisma.product.findMany();        
    } catch (error) {
        console.log(error);     
    }

    console.log(products);    

    return {
        products
    };
}

I can get around the issue by stringifying and parsing the object before I return it like this:

export async function load() {
    let products: Product[] = [];
    try {
        products = await prisma.product.findMany();        
    } catch (error) {
        console.log(error);     
    }

    console.log(products);    

    return {
        products: JSON.parse(JSON.stringify(products))
    };
}

Prisma uses decimal.js for its decimals it could be causing a conflict. Reference: https://www.prisma.io/docs/concepts/components/prisma-client/working-with-fields#working-with-decimal

Prisma Discussion:
prisma/prisma#19063

Reproduction

Repo: https://github.com/ieedan/SvelteKit-Decimal-Errors

You can comment and uncomment the return statements in +page.server.ts

export async function load() {
    let products: Product[] = [
        {
          id: 'e290ca8b-b763-4782-af1d-bc4b2f9160c4',
          name: 'Mouse',
          description: 'Mousey mouse',
          price: new Prisma.Decimal(12.99)
        }
    ];
    // try {
    //     products = await prisma.product.findMany();        
    // } catch (error) {
    //     console.log(error);     
    // }

    console.log(products);    

    // This doesn't work
    return {
        products
    };
    // This works
    return {
        products: sendJSON(products)
    };
}

Logs

[
  {
    id: 'e290ca8b-b763-4782-af1d-bc4b2f9160c4',
    name: 'Mouse',
    description: 'Mousey mouse',
    price: 12.99
  }
]
Error: Data returned from `load` while rendering / is not serializable: Cannot stringify arbitrary non-POJOs (data.products[0].price)
    at get_data (C:/Users/ablesea/tempVscode/speltkit/shopapp/SvelteKit-Decimal-Errors/node_modules/.pnpm/@sveltejs+kit@1.25.0_svelte@4.2.0_vite@4.4.9/node_modules/@sveltejs/kit/src/runtime/server/page/render.js:580:9)
    at Module.render_response (C:/Users/ablesea/tempVscode/speltkit/shopapp/SvelteKit-Decimal-Errors/node_modules/.pnpm/@sveltejs+kit@1.25.0_svelte@4.2.0_vite@4.4.9/node_modules/@sveltejs/kit/src/runtime/server/page/render.js:280:27)
.4.9/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:295:10)
    at async resolve (C:/Users/ablesea/tempVscode/speltkit/shopapp/SvelteKit-Decimal-Errors/node_modules/.pnpm/@sveltejs+kit@1.25.0_svelte@4.2.0_vite@4.4.9/node_modules/@sveltejs/kit/src/runtime/server/respond.js:415:18)
    at async Module.respond (C:/Users/ablesea/tempVscode/speltkit/shopapp/SvelteKit-Decimal-Errors/node_modules/.pnpm/@sveltejs+kit@1.25.0_svelte@4.2.0_vite@4.4.9/node_modules/@sveltejs/kit/src/runtime/server/respond.js:282:20)
    at async file:///C:/Users/ablesea/tempVscode/speltkit/shopapp/SvelteKit-Decimal-Errors/node_modules/.pnpm/@sveltejs+kit@1.25.0_svelte@4.2.0_vite@4.4.9/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:506:22

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (24) x64 12th Gen Intel(R) Core(TM) i7-12850HX
    Memory: 17.51 GB / 31.61 GB
  Binaries:
    Node: 18.15.0 - C:\Program Files\nodejs\node.EXE   
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD     
    npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.7.6 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (117.0.2045.31)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.0
    @sveltejs/kit: ^1.20.4 => 1.25.0
    svelte: ^4.0.5 => 4.2.0
    vite: ^4.4.2 => 4.4.9

Severity

serious, but I can work around it

Additional Information

No response

[Conduitry]

There is an existing issue #9401 for allowing custom serialization of data. If that's implemented, that's going to be your solution, because we can't serialize/deserialize arbitrary classes.