Like what we’re doing? Star us on GitHub!

'SelectInput' JSX type error

hyper light thrifter
last month
3

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.

Screen_Shot_2023-02-12_at_10.33.14_PM.png
  • jesschow
    Payload Team
    2 weeks 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

    selectInput

    and not the overall

    select

    field? Do you get the same issue if you use

    select

    ?

  • hyper light thrifter
    last week

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

    select
Open the post
Continue the discussion in Discord
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More