You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
#4517
Open
3 tasks done
ZynthCode opened this issue
May 3, 2024
· 2 comments
Describe the issue that you're seeing. Any Loom videos or screenshots usually help a lot!
When I am transitioning from using import client from "../../tina/__generated__/client"; to import client from "../../tina/__generated__/databaseClient"; objects that were previously successfully serializable are no longer serializable.
constHomeContent=(props: {data: HomeQuery,variables: HomeQueryVariables,query: string})=>{const{ data }=useTina(props);consthome=data.homeasHome;return(<divdata-tina-field={tinaField(home)}className="py-12 space-y-12 "><TitleSection{...home}/><HomeSections{...home}/></div>);};
This no longer works after changing client to databaseClient. The reasons for this is unknown, but I suspect under the hood the way TinaCMS handles typing is different somehow. Would be excellent if we could find a way to use Tina's generated types to solve this, without having to manually parse the data everywhere we ask for a result from Tina.
Navigate to /src/app/page.tsx and change getHomeProps() to use the rawData directly from const rawData = await client.queries.post({ relativePath: "_home.md" });, rather than using the hacky a DTO to transfer data.
Jump into <HomeContent {...props} /> and replace the props with what we normally would use (using generated types):
Navigate to localhost:3000 and you will see error logs:
⨯ 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.
This does not occur when you use the client and TINA_PUBLIC_IS_LOCAL=true.
System Info
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
System:
OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
CPU: (20) x64 12th Gen Intel(R) Core(TM) i9-12900H
Memory: 45.93 GB / 62.43 GB
Container: Yes
Shell: 5.8.1 - /usr/bin/zsh
Binaries:
Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
Yarn: 1.22.22 - ~/dev/zynthcode/tina-nextjs-app/node_modules/.bin/yarn
npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
Browsers:
Brave Browser: 124.1.65.126
Chrome: 121.0.6167.160
npmPackages:
@tinacms/cli: ^1.5.43 => 1.5.43
@tinacms/datalayer: ^1.2.33 => 1.2.33
tinacms: ^1.6.1 => 1.6.1
I have discovered a better hack that allows you to keep using the data types generated.
Create an util function:
exportconstfixTinaResults=<T>(data: T): T=>{try{constserializedData=JSON.stringify(data);returnJSON.parse(serializedData)asT;}catch(error){console.error("Error in serializing/deserializing data:",error);thrownewError("Handling data failed");}};
Describe the issue that you're seeing. Any Loom videos or screenshots usually help a lot!
When I am transitioning from using
import client from "../../tina/__generated__/client";
toimport client from "../../tina/__generated__/databaseClient";
objects that were previously successfully serializable are no longer serializable.For example, using the client this worked:
With HomeContent looking like this:
This no longer works after changing
client
todatabaseClient
. The reasons for this is unknown, but I suspect under the hood the way TinaCMS handles typing is different somehow. Would be excellent if we could find a way to use Tina's generated types to solve this, without having to manually parse the data everywhere we ask for a result from Tina.The temporary solution
Not a good way to handle this, since I would have to manually change multiple places, and remember to change it. More overhead.
Reproduction
https://github.com/ZynthCode/tina-nextjs-app
Steps to reproduce
git clone https://github.com/ZynthCode/tina-nextjs-app
Navigate to /src/app/page.tsx and change
getHomeProps()
to use the rawData directly fromconst rawData = await client.queries.post({ relativePath: "_home.md" });
, rather than using the hacky a DTO to transfer data.Jump into <HomeContent {...props} /> and replace the props with what we normally would use (using generated types):
Install and run the app:
Navigate to localhost:3000 and you will see error logs:
This does not occur when you use the client and TINA_PUBLIC_IS_LOCAL=true.
System Info
(Same issue in tinacms 1.6.2 btw)
Validations
The text was updated successfully, but these errors were encountered: