Cannot resolve 'fs' when loading <ListView /> about payload HOT 6 CLOSED

Hey @ahmetskilinc, this is because you are attempting to import a server component into a client component, breaking the rules of React Server Components. The ListView component performs server-side logic, including the use of the fs module as your error indicates. Your MediaGrid component, however, is marked with the use client directive. Once you are past the client boundary, you cannot use server-only paradigms. You have two options you can take here:

1. Write your component as a server component, so you can render the List View as needed. You can still interleave client components as needed.
2. The pattern that Payload follows for cases like this is to pre-render those components on the server, and simply return them from client components. To do this, get the pre-rendered List View from the useComponentMap hook, and simply return it from your client component:

   'use client'
   import { useComponentMap } from '@payloadcms/ui'
   
   export const MyComponent = () => {
     const { ListView } = useComponentMap()
     return ListView
   }

   This option is only valid within the Admin Panel, i.e. in a Custom Component. To use the ListView outside the Admin Panel, you will need to import it into a server component and render it on the server (option 1).

from payload.

@jacobsfletch Gettin this now - Property 'ListView' does not exist on type 'IComponentMapContext'.

from payload.

@ahmetskilinc ok must be because you are attempting to use this hook outside the admin panel. I will add a disclaimer to my comment above indicating how this is not possible. For cases like this, you will need to use option 1: import and render the ListView within a Server Component.

from payload.

@jacobsfletch The hook works in the same file to get getComponentMap.
Doesn't this count as rendering it in the AdminPanel?

from payload.

Ah ok, looking now at the types and it appears to be called List instead of ListView, same with Edit.

from payload.

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.

from payload.