'SelectInput' JSX type error

default discord avatar
hyper light thrifter
7 months ago

When trying to re-use the


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


, 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": [

  "include": [

  "//": "The myelinPanel is built by Vite and has its own TSConfig",
  "exclude": [

  "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 (

Something else I can add: I changed the file with the component from




and everything compiles fine and the Select field works. So it's 100% a types issue.

  • discord user avatar
    Payload Team
    6 months ago

    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


    and not the overall


    field? Do you get the same issue if you use



  • default discord avatar
    hyper light thrifter
    6 months ago

    no good reason; i likely misunderstood which one was intended to be used. i'll try normal


    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)

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!


Connect with the Payload Community on Discord



Can't find what you're looking for?

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