#How to add custom component?

7 messages · Page 1 of 1 (latest)

wispy oxide
#

this is my custom component :

'use client'
import React, { useState } from 'react'

export function MyClientComponent() {
  const [count, setCount] = useState(0)

  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
}

I add to collection from :

  admin: {
    useAsTitle: 'title',
    components: {
      views: {
        edit: {
          default: {
            Component: '/components/custom_component',
          },
        },
      },
    },
  },

when i open my collection, i got this error :

getFromImportMap: PayloadComponent not found in importMap {
  key: '/components/custom_component#default',
  PayloadComponent: '/components/custom_component',
  schemaPath: ''
} You may need to run the `payload generate:importmap` command to generate the importMap ahead of runtime.

so i run the command, but no luck.

then I see the importmap, the file exist (image attached).

what did I do wrong here?

thank you

image.png
pliant pecanBOT
#
New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

Community-Help:

mossy rock
#

Your import is close, but you need to specify the named export more specifically:

 admin: {
    useAsTitle: 'title',
    components: {
      views: {
        edit: {
          default: {
            Component: '/components/custom_component#MyClientComponent',',
          },
        },
      },
    },
  },
#

Or you can add a default export to the component itself:

export default function MyClientComponent() {
#

once you do the above you'll have to run pnpm generate:importmap again but then it should work!

wispy oxide
#

Ohh thank you, it works now

pliant pecanBOT