Custom component type mismatch | Payload | Page 1

river edge Sep 24, 2024, 9:48 PM

#

Hey guys,

im feeling kinda dumb but i cant find a way to fix this on my own.

Im trying to import and set a custom Icon inside the payload config but it doesnt accept any component i make due to a type mismatch:

Type '() => React.JSX.Element' is not assignable to type 'CustomComponent<Record<string, any>> | undefined'.ts(2322)
(property) Icon?: CustomComponent<Record<string, any>> | undefined

Two screenshots of the config as well as the Icon are attatched.

Thanks for any help!

small dustBOT Sep 24, 2024, 9:48 PM

#

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:

umbral horizon Sep 24, 2024, 9:58 PM

#

Payload v3? Try something like this:

// whitelabelling
const logoPath = 'src/components/shared/Logo.tsx'
const iconPath = 'src/components/shared/Icon.tsx'

export default buildConfig({
admin: {
user: Users.slug,
components: {
graphics: {
Icon: {
path: iconPath,
},
Logo: {
path: logoPath,
},
},
},
...
...

river edge Sep 24, 2024, 10:24 PM

#

Module not found: Can't resolve 'src/components/shared/Icon.tsx'
> 1 | import { default as default_0 } from 'src/components/shared/Icon.tsx'
    | ^
  2 |
  3 | export const importMap = {
  4 |   "src/components/shared/Icon.tsx#default": default_0

#

Getting this then, also tried it with shared/Icon#Icon for the named export, but its the same result

#

And yes its the latest beta version of v3

#

Module not found: Can't resolve 'src/components/shared/Icon'
> 1 | import { Icon as Icon_0 } from 'src/components/shared/Icon'
    | ^
  2 |
  3 | export const importMap = {
  4 |   "src/components/shared/Icon#Icon": Icon_0

umbral horizon Sep 24, 2024, 11:00 PM

#

You need to use "your" path to your Icon.tsx - in your config you had ./components/Icon (you may need the .tsx extension)

#

You just need to replace imports with literal path strings from now on

river edge Sep 24, 2024, 11:08 PM

#

Path should be correct, i just applied your structure for simplicity, thats why its different now. But i'm running into lot of bugs so either my installation is messed up or i should go to bed

umbral horizon Sep 24, 2024, 11:16 PM

#

Lol, when all else fails, stop server, delete .next, run generate:importmap, start server (I really should write a script for this). Usually fixes most issues for me.

Just in case it helps, my Icon.tsx:

import Image from "next/image"
import my-logo from '../../../public/assets/my-logo.svg'

const Icon: React.FC = () => {
return (
<>
<Image src={my-logo} alt="My Logo"/>
</>
)
}

export default Icon

river edge Sep 24, 2024, 11:20 PM

#

Thanks a lot for your help, i think its best if i call it a night and get back to it with a clean head 😄

umbral horizon Sep 24, 2024, 11:21 PM

#

No problem, good luck

river edge Sep 25, 2024, 6:44 PM

#

At this point i really dont know what could cause this. The baseDir of the importMap seems to be correct, Logo has a default export and is in the same dir as the payload.config for test purpose. Still it doesnt find anything. Everything else runs fine and was for sure a mistake by me, but i cant find a reason for this.