generate import map npx payload generate:importmap giving an error #9861
-
|
loco-payload@1.0.0 payload
node:internal/process/promises:394 Node.js v22.12.0 |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 1 reply
-
|
so this is my custom component, still a work in progress, 'use client'
import { useEffect } from 'react'
import { useField } from '@payloadcms/ui'
import { useAllFormFields } from '@payloadcms/ui'
import { TextFieldClientComponent } from 'payload'
import { getSiblingData } from 'payload/shared'
export const CategoryDataField: TextFieldClientComponent = ({ path }) => {
console.log('path ==>', path)
const [fields, dispatchFields] = useAllFormFields()
const categoryField = getSiblingData(fields, 'nominations.0.category')
const { setValue, value } = useField({ path: 'nominations.0.categorySlug' })
console.log('categoryField', value)
useEffect(() => {
if (categoryField?.category) {
fetch(`/api/categories/${categoryField?.category}?depth=2`)
.then((res) => res.json())
.then((data) => {
console.log('data', data)
setValue(data?.categorySlug)
})
}
}, [categoryField?.category, setValue])
return null
}and this is the Collection that uses it, just the relavant bits // imports
import { anyone } from '@/access/anyone'
import { authenticated } from '@/access/authenticated'
import { CollectionConfig } from 'payload'
import { CategoryDataField } from 'src/collections/Nominees/components/CategoryDataField'
// useage
{
name: 'categorySlug',
type: 'text',
virtual: true,
admin: {
readOnly: true,
components: {
Field: CategoryDataField as any,
},
},
},output from command |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, for help. I solved the issue with some help in discord, here is the correction for someone who might run into same issue {
name: 'categorySlug',
type: 'text',
virtual: true,
admin: {
readOnly: true,
components: {
Field: '/collections/Nominees/components/CategoryDataField#CategoryDataField',
},
},
},the name is added because it is a named export in my custom component and not a default export https://payloadcms.com/docs/admin/components#component-paths |
Beta Was this translation helpful? Give feedback.
-
|
when i try to give url to custom component
[ Server ] getFromImportMap: PayloadComponent not found in importMap {key: "@/components/FAQTabs.tsx#default"PayloadComponent: "@/components/FAQTabs.tsx#default"schemaPath: "@/components/FAQTabs.tsx#default"} "You may need to run the and when i try to run the command for generating npm install generate:importmap then i got error .css |
Beta Was this translation helpful? Give feedback.
-
|
export const ListingPosts: CollectionConfig<'posts'> = { this is working but when i will try to give the direct path in strings |
Beta Was this translation helpful? Give feedback.
-
|
For anyone else running into this, double check the If you're getting a message in your logs that reads something along the lines of "importMap couldn't find the component," then it's most likely an issue with your path. If you're getting a cryptic error message about file extensions, then I'd double check that you're not passing an actual React component to the path, and instead you should be passing a string path to it. |
Beta Was this translation helpful? Give feedback.
-
|
solved it in my case its default so i need to add #default at the end of my path |
Beta Was this translation helpful? Give feedback.
For anyone else running into this, double check the
pathto your custom component. It should be a string path that points to where your custom component is. If it's a named export, you should use a#followed by the variable name of the component. (IE:'/components/MyComp#MyComp').If you're getting a message in your logs that reads something along the lines of "importMap couldn't find the component," then it's most likely an issue with your path.
If you're getting a cryptic error message about file extensions, then I'd double check that you're not passing an actual React component to the path, and instead you should be passing a string path to it.
See more on component paths.