Using payload components inside Edit view or NextJs page

default discord avatar
ysione
9 months ago
2

Does anyone know a correct way to use default payload components? Or is there even a way to do it?


I need to display a table inside Edit view, I wrote a component and added an UI field to collection. Problem comes when using for example Cell component


import { Cell } from "payload/components/views/Cell";

...
<div id="head" className='grid grid-cols-4'>
   <Cell/>
</div>
...

It gives following error


./node_modules/payload/components/views/Cell.ts
Module parse failed: Unexpected token (2:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export { default as Cell } from '../../dist/admin/components/views/collections/List/Cell';
> export type { Props } from '../../dist/admin/components/views/collections/List/Cell/types';
  • discord user avatar
    jesschow
    Payload Team
    9 months ago

    Hi @ysione - this will be possible in the future 👀 for now only some fields are available to be used or extended (text, textarea, upload). The SEO plugin provides a good example on how to do this

    https://github.com/payloadcms/plugin-seo/tree/main/src/fields
  • default discord avatar
    ssyberg
    3 months ago

    I know this is an old thread but I'm hitting this issue as well, though I suspect it's because I'm using js and not ts? I'm using the collection list view example straight from the docs and getting this error:


    ERROR in ./node_modules/payload/components/views/List.ts 2:7
    Module parse failed: Unexpected token (2:7)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    | export { default as List } from '../../dist/admin/components/views/collections/List/Default';
    > export type { Props } from '../../dist/admin/components/views/collections/List/types';
Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.