'SelectInput' JSX type error

default discord avatar
hyper light thrifter
7 months ago
7

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.

  • discord user avatar
    jesschow
    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

    selectInput

    and not the overall

    select

    field? Do you get the same issue if you use

    select

    ?

  • 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

    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)

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

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

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