DatePicker throws error "cannot be used as a JSX component" #34952

xsephtion · 2022-04-09T17:17:26Z

Reproduction link

https://gist.github.com/xsephtion/34327c7484dc17a7cdbcf014462ce198

Steps to reproduce

Run build on GitHub Actions (Self-hosted, or GitHub Runners)
Build will throw:

Type error: 'DatePicker' cannot be used as a JSX component.
Its instance type 'Component<PickerProps & { status?: "" | "error" | "warning" | undefined; }, unknown, any> & CommonPickerMethods' is not a valid JSX element.

What is expected?

Successful Build

What is actually happening?

Build is throwing error

Environment	Info
antd	4.19.5
React	^17.0.2
System	ubuntu/mac
Browser	N/A

All of a sudden our pipelines were failing.

mafnankhan · 2022-04-10T01:54:16Z

@xsephtion same issue I am facing, did you get a solution for this ?

xsephtion · 2022-04-10T15:18:59Z

@xsephtion same issue I am facing, did you get a solution for this ?

I did, what I had to do is to is

install npm-force-resolutions
Change your package.json script to:

 "scripts": {
    "preinstall": "npx npm-force-resolutions",
     ....
  },
 "resolutions": {
    "@types/react": "17.0.30"
  },

I think this is just a quick and temporary fix.

lusivelin · 2022-04-11T04:40:34Z

@xsephtion can you provide how you found a solution to do force-resolutions for this issue?

xsephtion · 2022-04-11T04:46:20Z

@lusivelin facebook/react#24304 (comment)

lusivelin · 2022-04-11T05:18:59Z

@xsephtion Thanks for sharing.
I have found solutions for yarn facebook/react#24304

gaearon · 2022-04-12T12:57:58Z

Would it make sense to change the dependencies on types to be optional peer deps? facebook/react#24304 (comment)

abenhamdine · 2022-04-25T08:30:29Z

I managed to fix the issue by forcing installation of types version 17, as told in #34952 (comment)

  "resolutions": {
    "@types/react": "17.0.44"
  },

It would be useful to add this solution in FAQ

ThielNS · 2022-05-04T14:46:52Z

I had the same problem, my solution was to update @types/react to the current version, today is 18.0.8.

At the root of the project run yarn add -D @types/react.

If it doesn't work, delete node_modules, and install the packs again.

simplast · 2022-05-13T01:44:01Z

I managed to fix the issue by forcing installation of types version 17, as told in #34952 (comment)
  "resolutions": {
    "@types/react": "17.0.44"
  },
It would be useful to add this solution in FAQ

I use react 16 ,can i add latest @types/react ? @ThielNS

pangchun · 2022-06-16T07:45:31Z

原因是ts与@types/react版本不适配。

解决

将@types/react的版本与ts的版本对应上即可。

查询版本对应关系

查看npm，找到二者的版本对应关系如下：https://www.npmjs.com/package/@types/react

查询本地ts版本

可以查询到本地版本为4.7.3。

C:\Users\Administrator\Documents\GitHub\react-bpmn>npm view typescript version
4.7.3

查询本地@types/react版本

在package.json文件中查看，@types/react 与 @types/react-dom 的版本。

查询@types/react与ts的具体适配版本

可以看到 ts4.7适配18.0.12。

npm info @types/react

dist-tags:
latest: 18.0.12  ts2.2: 15.0.30   ts2.5: 16.0.36   ts2.8: 16.9.34   ts3.1: 16.9.49   ts3.4: 17.0.2    ts3.7: 17.0.35   ts4.0: 18.0.12   ts4.3: 18.0.12   ts4.6: 18.0.12
ts2.0: 15.0.1    ts2.3: 16.0.36   ts2.6: 16.4.7    ts2.9: 16.9.35   ts3.2: 16.9.56   ts3.5: 17.0.8    ts3.8: 17.0.39   ts4.1: 18.0.12   ts4.4: 18.0.12   ts4.7: 18.0.12
ts2.1: 15.0.20   ts2.4: 16.0.36   ts2.7: 16.4.7    ts3.0: 16.9.46   ts3.3: 17.0.0    ts3.6: 17.0.19   ts3.9: 18.0.12   ts4.2: 18.0.12   ts4.5: 18.0.12   ts4.8: 18.0.12

查询@types/react-dom与ts的具体适配版本

可以看到 ts4.7适配18.0.5。

npm info @types/react-dom

dist-tags:
latest: 18.0.5  ts2.2: 15.5.0   ts2.5: 16.0.3   ts2.8: 16.9.7   ts3.1: 16.9.8   ts3.4: 17.0.1   ts3.7: 17.0.11  ts4.0: 18.0.5   ts4.3: 18.0.5   ts4.6: 18.0.5
ts2.0: 0.14.20  ts2.3: 16.0.3   ts2.6: 16.0.6   ts2.9: 16.9.8   ts3.2: 16.9.9   ts3.5: 17.0.5   ts3.8: 17.0.11  ts4.1: 18.0.5   ts4.4: 18.0.5   ts4.7: 18.0.5
ts2.1: 15.5.0   ts2.4: 16.0.3   ts2.7: 16.0.6   ts3.0: 16.9.8   ts3.3: 17.0.0   ts3.6: 17.0.9   ts3.9: 18.0.5   ts4.2: 18.0.5   ts4.5: 18.0.5   ts4.8: 18.0.5

执行修改

修改package.json中@types/react与@types/react-dom的版本并执行npm install即可。

qwe5117022 · 2022-07-14T01:34:58Z

原因是ts与@types/react版本不适配。

解决

将@types/react的版本与ts的版本对应上即可。

查询版本对应关系

查看npm，找到二者的版本对应关系如下：https://www.npmjs.com/package/@types/react

查询本地ts版本

可以查询到本地版本为4.7.3。
C:\Users\Administrator\Documents\GitHub\react-bpmn>npm view typescript version
4.7.3
查询本地@types/react版本

在package.json文件中查看，@types/react 与 @types/react-dom 的版本。

查询@types/react与ts的具体适配版本

可以看到 ts4.7适配18.0.12。
npm info @types/react

dist-tags:
latest: 18.0.12  ts2.2: 15.0.30   ts2.5: 16.0.36   ts2.8: 16.9.34   ts3.1: 16.9.49   ts3.4: 17.0.2    ts3.7: 17.0.35   ts4.0: 18.0.12   ts4.3: 18.0.12   ts4.6: 18.0.12
ts2.0: 15.0.1    ts2.3: 16.0.36   ts2.6: 16.4.7    ts2.9: 16.9.35   ts3.2: 16.9.56   ts3.5: 17.0.8    ts3.8: 17.0.39   ts4.1: 18.0.12   ts4.4: 18.0.12   ts4.7: 18.0.12
ts2.1: 15.0.20   ts2.4: 16.0.36   ts2.7: 16.4.7    ts3.0: 16.9.46   ts3.3: 17.0.0    ts3.6: 17.0.19   ts3.9: 18.0.12   ts4.2: 18.0.12   ts4.5: 18.0.12   ts4.8: 18.0.12
查询@types/react-dom与ts的具体适配版本

可以看到 ts4.7适配18.0.5。
npm info @types/react-dom

dist-tags:
latest: 18.0.5  ts2.2: 15.5.0   ts2.5: 16.0.3   ts2.8: 16.9.7   ts3.1: 16.9.8   ts3.4: 17.0.1   ts3.7: 17.0.11  ts4.0: 18.0.5   ts4.3: 18.0.5   ts4.6: 18.0.5
ts2.0: 0.14.20  ts2.3: 16.0.3   ts2.6: 16.0.6   ts2.9: 16.9.8   ts3.2: 16.9.9   ts3.5: 17.0.5   ts3.8: 17.0.11  ts4.1: 18.0.5   ts4.4: 18.0.5   ts4.7: 18.0.5
ts2.1: 15.5.0   ts2.4: 16.0.3   ts2.7: 16.0.6   ts3.0: 16.9.8   ts3.3: 17.0.0   ts3.6: 17.0.9   ts3.9: 18.0.5   ts4.2: 18.0.5   ts4.5: 18.0.5   ts4.8: 18.0.5
执行修改

修改package.json中@types/react与@types/react-dom的版本并执行npm install即可。

这样不行，我试过本地4.7我需要适配 18版本的types，但是18版本的会报错，modal，因为现在18的reactchildrenprops也需要定义

UddeshJain · 2022-11-24T16:03:14Z

I had same problem, I solved it by changing

<DatePicker.RangePicker allowEmpty={[true, true]} />

TO

const { RangePicker }: any = DatePicker;

<RangePicker allowEmpty={[true, true]} />

PriyavartRajain · 2023-03-24T19:17:05Z

I had same problem, I solved it by changing

<DatePicker.RangePicker allowEmpty={[true, true]} />

TO

const { RangePicker }: any = DatePicker;

<RangePicker allowEmpty={[true, true]} />

Is it possible to make this work with a DatePicker instead of a RangePicker?

hanorine · 2023-05-10T13:05:37Z

@types/react@18.2.6 seems to reintroduce this issue. Falling back to @types/react@18.2.0 resolved my issue.

gabrielopeyemi · 2023-06-04T10:15:28Z

I ran "preinstall": "npx npm-force-resolutions" but it throw few errors, errors are mainly using hooks wrongly, after fixing I ran yarn add @types/react@latest

Olimiya · 2023-06-14T08:02:40Z

I had same problem, I solved it by changing

<DatePicker.RangePicker allowEmpty={[true, true]} />

TO

const { RangePicker }: any = DatePicker;

<RangePicker allowEmpty={[true, true]} />

使用这个解决方案，会报错：
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
直接用@ts-ignore得了。

benkelaar · 2023-12-15T09:57:24Z

@types/react@18.2.6 seems to reintroduce this issue. Falling back to @types/react@18.2.0 resolved my issue.

With @types/react@18.2.45 this still seems to be an issue, do you happen to know if there's an issue somewhere to track whether this will be resolved in a release?

xsephtion closed this as completed Apr 10, 2022

Lind-pro added a commit to jetlinks/jetlinks-ui-antd that referenced this issue Apr 11, 2022

fix(tslint): fix ant-design/ant-design#34952

cea3315

afc163 mentioned this issue May 9, 2022

Typescript: Replacing moment with dayjs as shown in documentation throw a type error on build #35441

Closed

github-actions bot mentioned this issue May 28, 2022

'RangePicker' cannot be used as a JSX component. #35788

Closed

afc163 reopened this May 30, 2022

afc163 mentioned this issue May 30, 2022

tsx中使用DatePicker，报错：“DatePicker”不能用作 JSX 组件。 #35771

Closed

github-actions bot mentioned this issue Jun 14, 2022

cannot use imported antd components to be inside Form.Item #36049

Closed

afc163 closed this as completed Jun 16, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DatePicker throws error "cannot be used as a JSX component" #34952

DatePicker throws error "cannot be used as a JSX component" #34952

xsephtion commented Apr 9, 2022 •

edited

mafnankhan commented Apr 10, 2022

xsephtion commented Apr 10, 2022

lusivelin commented Apr 11, 2022

xsephtion commented Apr 11, 2022

lusivelin commented Apr 11, 2022 •

edited

gaearon commented Apr 12, 2022

abenhamdine commented Apr 25, 2022

ThielNS commented May 4, 2022

simplast commented May 13, 2022

pangchun commented Jun 16, 2022

qwe5117022 commented Jul 14, 2022

解决

查询版本对应关系

查询本地ts版本

查询本地@types/react版本

查询@types/react与ts的具体适配版本

查询@types/react-dom与ts的具体适配版本

执行修改

UddeshJain commented Nov 24, 2022 •

edited

PriyavartRajain commented Mar 24, 2023

hanorine commented May 10, 2023

gabrielopeyemi commented Jun 4, 2023

Olimiya commented Jun 14, 2023

benkelaar commented Dec 15, 2023

DatePicker throws error "cannot be used as a JSX component" #34952

DatePicker throws error "cannot be used as a JSX component" #34952

Comments

xsephtion commented Apr 9, 2022 • edited

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

mafnankhan commented Apr 10, 2022

xsephtion commented Apr 10, 2022

lusivelin commented Apr 11, 2022

xsephtion commented Apr 11, 2022

lusivelin commented Apr 11, 2022 • edited

gaearon commented Apr 12, 2022

abenhamdine commented Apr 25, 2022

ThielNS commented May 4, 2022

simplast commented May 13, 2022

pangchun commented Jun 16, 2022

解决

查询版本对应关系

查询本地ts版本

查询本地@types/react版本

查询@types/react与ts的具体适配版本

查询@types/react-dom与ts的具体适配版本

执行修改

qwe5117022 commented Jul 14, 2022

解决

查询版本对应关系

查询本地ts版本

查询本地@types/react版本

查询@types/react与ts的具体适配版本

查询@types/react-dom与ts的具体适配版本

执行修改

UddeshJain commented Nov 24, 2022 • edited

PriyavartRajain commented Mar 24, 2023

hanorine commented May 10, 2023

gabrielopeyemi commented Jun 4, 2023

Olimiya commented Jun 14, 2023

benkelaar commented Dec 15, 2023

xsephtion commented Apr 9, 2022 •

edited

lusivelin commented Apr 11, 2022 •

edited

UddeshJain commented Nov 24, 2022 •

edited