When trying to re-use the
SelectInput
component in my own custom admin component, I get this type error:
'SelectInput' cannot be used as a JSX component.
Its return type 'ReactElement<any, any>' is not a valid JSX element.
Type 'ReactElement<any, any>' is missing the following properties from type 'Element': tag, attrs, statets(2786)
From some googling, I think this may have something to do with conflicting React versions, or else some kind of issue with TypeScript not using the correct React version.
However, I only have one version of React present in my project and it's
^18.2.0
, the same as Payload CMS.
I also added the following to my package.json which did not seem to help:
"overrides": {
"react": "^18.2.0"
},
"resolutions": {
"react": "^18.2.0"
}
My tsconfig is as follows:
{
"compilerOptions": {
"allowJs": true,
"baseUrl": ".",
"esModuleInterop": true,
"lib": ["es2019", "es2020.bigint", "es2020.string", "es2020.symbol.wellknown"],
"jsx": "react",
"module": "commonjs",
"moduleResolution": "node",
"noEmitOnError": true,
"outDir": "./dist",
"paths": {
"bundles/*": ["bundles/*"],
"lib/*": ["lib/*"],
"combat/*": ["bundles/myelin-turn-combat/lib/*"],
"types/*": ["types/*"],
"payload/generated-types": ["./bundles/myelin-cms/payload-types.ts"],
},
"pretty": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"target": "es2019",
"typeRoots": [
"./node_modules/@types"
]
},
"include": [
"bundles",
"lib",
"node_modules/ranvier",
"config.json",
"server.ts",
"tests",
"payload.config.ts"
],
"//": "The myelinPanel is built by Vite and has its own TSConfig",
"exclude": [
"bundles/myelin-panel/src",
"bundles/myelin-panel/dist"
],
"ts-node": {
"require": ["tsconfig-paths/register"],
"swc": true
}
}
(note "jsx": "react")
And finally, the component where the error crops up is as follows (I didn't implement any custom behavior yet due to running into this issue right away):
const CustomSelect: React.FC<SelectInputProps> = (props) => {
// const { value, setValue } = useField<SelectInputProps>(props);
return (
<SelectInput
{...props}
/>
);
}
Something else I can add: I changed the file with the component from
tsx
to
jsx
and everything compiles fine and the Select field works. So it's 100% a types issue.
hi @hyper light thrifter - good catch, we plan to release a component library which will officially resolve issues like this when reusing payload components.
Is there a reason you are using just the
selectInput
and not the overall
select
field? Do you get the same issue if you use
select
?
no good reason; i likely misunderstood which one was intended to be used. i'll try normal
select
since that time i actually changed it to use a ReactSelect
i forget what i wanted to customize by doing this but i'll try changing it to the payload Select
ah, i think i wanted to try customizing the Options component but i walked that back
i refactored it to use a regular Select but then realized.... i also had refactored out any custom business logic and so i just did away with the custom component altogether (long story)
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.