Unknown Server component being passed into client component error
Unanswered
Brown bear posted this in #help-forum
Brown bearOP
Warning: Only plain objects can be passed to Client Components from Server Components.
Classes or other objects with methods are not supported.
{queryCache: {listeners: Set, subscribe: function, config: ..., queries: ..., queriesMap: ...}, mutationCache: ..., logger: ..., defaultOptions: ..., queryDefaults: ..., mutationDefaults: ..., mountCount: ...}
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
error node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (1904:12) @ resolveModelToJSON
error Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".{listeners: Set, subscribe: function, config: ..., queries: ..., queriesMap: ...}
^^^^^^^^
at stringify (<anonymous>)
Why might I be getting this error? And how can I troubleshoot it? Doesnt exactly say where the error is occouring
Classes or other objects with methods are not supported.
{queryCache: {listeners: Set, subscribe: function, config: ..., queries: ..., queriesMap: ...}, mutationCache: ..., logger: ..., defaultOptions: ..., queryDefaults: ..., mutationDefaults: ..., mountCount: ...}
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
error node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (1904:12) @ resolveModelToJSON
error Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".{listeners: Set, subscribe: function, config: ..., queries: ..., queriesMap: ...}
^^^^^^^^
at stringify (<anonymous>)
Why might I be getting this error? And how can I troubleshoot it? Doesnt exactly say where the error is occouring
3 Replies
the error message contains properties that look like a
QueryClient from react-query, so you need to investigate your code related to this library. for reference, here is how they recommend setting up the project: https://tanstack.com/query/v4/docs/react/guides/ssr#using-the-app-directory-in-nextjs-13notice the
QueryClient is created in a client component instead of a server component, because it needs to be passed to the QueryClientProvider as a propBrown bearOP
Interesting, will try it out