javascript - 类型 '{}' 不可分配给类型 'ReactNode'

Question

这个问题在这里已经有了答案:





NPM package cannot be used as a JSX Component - Type errors

(13 个回答)


4个月前关闭。




我收到此错误，但仅在 Vercel 中，而不是在本地，为什么？

error: 'FontAwesomeIcon' cannot be used as a JSX component.

./components/Services/ServiceContainer.tsx:25:6
12:01:54.967    Type error: 'FontAwesomeIcon' cannot be used as a JSX component.
12:01:54.967      Its element type 'ReactElement<any, any> | Component<FontAwesomeIconProps, any, any>' is not a valid JSX element.
12:01:54.968        Type 'Component<FontAwesomeIconProps, any, any>' is not assignable to type 'Element | ElementClass'.
12:01:54.968          Type 'Component<FontAwesomeIconProps, any, any>' is not assignable to type 'ElementClass'.
12:01:54.968            The types returned by 'render()' are incompatible between these types.
12:01:54.968              Type 'React.ReactNode' is not assignable to type 'import("/vercel/path0/node_modules/@types/styled-jsx/node_modules/@types/react/index").ReactNode'.
12:01:54.968                Type '{}' is not assignable to type 'ReactNode'.

import Head from 'next/head'
import Image from 'next/image'
import styles from '../../styles/Services/ServiceContainer.module.css'
import { IconProp } from '@fortawesome/fontawesome-svg-core'
import dynamic from 'next/dynamic'
const FontAwesomeIcon = dynamic(
    async () => (await import('@fortawesome/react-fontawesome')).FontAwesomeIcon
)

export default function ServiceContainer(props: {
    title: string
    list?: string[]
    icon: IconProp
    text?: string
    isContainerNarrow?: boolean
}) {
    const { title, list, icon, text, isContainerNarrow } = props
    return (
        <div
            className={`${styles.serviceBoxContainer} ${
                isContainerNarrow ? styles.narrow : styles.wide
            }`}
        >
            <div className={styles.serviceBox}>
                <FontAwesomeIcon icon={icon} className={styles.icon} />
                <div className={styles.serviceBoxInner}>
                    <h2 className={'h2_2'}>{title}</h2>
                    {list && (
                        <ul>
                            {list.map((listItem: string) => (
                                <li key={listItem}>{listItem}</li>
                            ))}
                        </ul>
                    )}
                    {text && <p>{text}</p>}
                </div>
            </div>
        </div>
    )
}

{
    "dependencies": {
        "@date-io/date-fns": "^1.3.13",
        "@fortawesome/fontawesome-common-types": "^6.1.1",
        "@fortawesome/fontawesome-svg-core": "^6.1.1",
        "@fortawesome/free-solid-svg-icons": "^6.1.1",
        "@fortawesome/react-fontawesome": "^0.1.18",

Answer 1

上周我们开始在构建服务器上遇到此问题而没有进行重大更改，并且尚未设法找到修复程序，但是其他团队遇到与此错误相关的突然问题时已经创建了一些问题。
看看这个issue on the React GitHub page和 this one here on the redwoodjs GitHub page .
更新
Yevhen Rybak 在这个答案中的答案对我们有用NPM package cannot be used as a JSX Component - Type errors也许这个问题应该被标记为重复？
我还必须添加 preinstall script来自 Sahil Patel，如图所示 https://stackoverflow.com/a/71843120/13745308在同一个线程中。