Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Only plain objects from Server Components to Client Components #136

Open
codeBelt opened this issue Dec 30, 2024 · 0 comments
Open

Only plain objects from Server Components to Client Components #136

codeBelt opened this issue Dec 30, 2024 · 0 comments

Comments

@codeBelt
Copy link

I hope this is the correct place to report this issue.

When using Next.js and Drizzle with Neon, I encountered the following error:

Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.

Steps to Reproduce

Using Next.js with Drizzle ORM and the Neon Database, call a server-side function like the following to delete a record:

'use server';

export async function deleteGameSelectionServerAction(selectionId: GameSelectionType['id']) {
  return db.delete(gameSelectionsTable).where(eq(gameSelectionsTable.id, selectionId));
}

In the response, the _types object contains the functions getTypeParser and setTypeParser, and I wonder if that is the issue.

{
  command: 'DELETE',
  rowCount: 1,
  rows: [],
  fields: [],
  rowAsArray: false,
  viaNeonFetch: true,
  _parsers: [],
  _types: {
    _types: {
      getTypeParser: [Function: getTypeParser],
      setTypeParser: [Function: setTypeParser],
      arrayParser: [Object],
      builtins: [Object]
    },
    text: {},
    binary: {}
  }
}

Neon and drizzle setup:

import { neon } from '@neondatabase/serverless';
import { drizzle } from 'drizzle-orm/neon-http';
import 'server-only';

const sql = neon(process.env.POSTGRES_URL);

export const db = drizzle(sql, {
  schema: {
    // ...
  },
});

Temporary Workaround

Adding .returning() to the query resolves the issue, but this should not be necessary for the operation to work:

'use server';

export async function deleteGameSelectionServerAction(selectionId: GameSelectionType['id']) {
  return db.delete(gameSelectionsTable).where(eq(gameSelectionsTable.id, selectionId)).returning();
}

This workaround returns a different structure that does not include the problematic functions.

Environment

"@neondatabase/serverless": "^0.10.4",
"next": "^14.2.17",
"drizzle-orm": "0.38.3",
"drizzle-zod": "0.6.1",
"drizzle-kit": "0.30.1",

Node.js: v21.7.2
Browser: Chrome Version 131.0.6778.205 (Official Build) (arm64)

Additional Information:

It seems that the issue may also arise in cases involving a NeonDbError, but I don't have clear steps to reproduce that specific case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant