TS Error 'FieldComponent' cannot be used as a JSX component.

[eek-ai]

Prerequisites

• [X] I have searched the existing issues
• [X] I understand that providing a SSCCE example is tremendously useful to the maintainers.
• [X] I have read the documentation
• [X] Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

core

Version

5.16.1

Current Behavior

on project build (tsc && vite build) got error:

../../nodemodules/.pnpm/@rjsf+core@5.16.1@rjsf+utils@5.16.1_react@18.2.0/node_modules/@rjsf/core/src/components/fields/SchemaField.tsx:173:6 - error TS2786: 'FieldComponent' cannot be used as a JSX component. Its type 'Function' is not a valid JSX element type.

Expected Behavior

No error on tsc

Steps To Reproduce

1. install packages (core, utils) to your project
2. import Form from withTheme (core) and implement it to your render
3. build your project and get the error

Environment

- OS:MacOS 14.2.1 (23C71)
- Node: 20.10.0
- pnpm: 8.11.0

Anything else?

No response

[heath-freenome]

@eek-ai We really need a minimal reproducible test case to be able to understand your issue. Can you provide us with one?

[devmartynov]

@eek-ai We really need a minimal reproducible test case to be able to understand your issue. Can you provide us with one?

@heath-freenome I created the minimal reproducible test case. You can execute tsc command in terminal and see error

[akoshofmeister]

Any update on this? We face the same issue, using react@18

[devmartynov]

Any update on this? We face the same issue, using react@18

I downgrade typescript version to 5.0.4. This fixes the problem.

Waiting for response from author

[conner991]

I'm getting the same issue as well even with @rjsf/core Form and MUI Themed Forms.

Using React 18 and Typescript 5.0.4.

Everything is Typed out (interface and TSX return) so not sure why this error persists.

I was able to find a workaround by adding this to my tsconfig.json compilerOptions but it caused other issues within the project so probably won't go with it.

{ "compilerOptions": { "paths": { "react": [ "./node_modules/@types/react" ] } } }

This was discovered in this issue thread regarding React 18 breaking changes affecting peer dependencies with the @types/react library: https://github.com/facebook/react/issues/24304#issuecomment-1111184798

[dweber019]

Can confirm that something in the typescript release 5.1.x has broken this. See https://devblogs.microsoft.com/typescript/announcing-typescript-5-1-rc/.

When I use version Typescript 5.0.4 my project works again.

[heath-freenome]

@dweber019 Unfortunately, due to issues with the chakra-ui theme and Typescript 5, we haven't been able to upgrade to the latest TS in our development environment although I, personally, am using @rjfs/utils, @rjsf/validator-ajv8, @rjsf/core and @rjsf/mui just fine with the latest typescript. I'm not sure exactly what it is that is causing this issue for you. There is a task to upgrade to the latest TS in our slow-moving v6 release, which has no current release date.

[dweber019]

@heath-freenome no worries. Just started using the awesome project at https://github.com/dweber019/backstage-plugins, specifically with https://github.com/dweber019/backstage-plugins/tree/main/plugins/accentuate.

There the default setting for tsconfig can be found at https://github.com/dweber019/backstage-plugins/blob/main/tsconfig.json#L2 which would be https://github.com/backstage/backstage/blob/master/packages/cli/config/tsconfig.json#L13.

This will throw errors as your settings are different with https://github.com/rjsf-team/react-jsonschema-form/blob/main/tsconfig.base.json#L24 and an explicit react import is not required by react-jsonschema-form but it's required by Backstage setup. I solved this by using https://github.com/dweber019/backstage-plugins/blob/main/tsconfig.json#L13 but at the end I finally had the error shown in this issue and had to downgrade Typescript.