Type '{}' is not assignable to type 'ReactNode'

Question

I got this error, but only in Vercel, not locally, why?

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",

When you inspect the type of `FontAwesomeIcon` locally, what is it? — felixmosh, Apr 13 '22 at 08:07

score 28 · Answer 1 · edited Sep 15 '22 at 14:00

28

We started experiencing this issue on our build server without making significant changes last week and have not managed to find a fix yet but there are a few issues that have been created of other teams experiencing sudden issues related to this error.

Check out this issue on the React GitHub page and this one here on the redwoodjs GitHub page.

Update

The answer from Yevhen Rybak worked for us.

I also had to add the preinstall script from Sahil Patel's answer.

edited Sep 15 '22 at 14:00

isherwood

58,414
16
114
157

answered Apr 13 '22 at 10:16

pattywoddle

307
3
6

70

Please don't post just links, but also the relevant information from the links, as links may change or break in the future – jrswgtr Apr 13 '22 at 12:48
1

This fixed it for me. Switch ReactNode with ReactElement – Stefan T Aug 09 '22 at 17:14
not sure why this is close but I manage to find a way around it, check the solution below – Gabriel soft Sep 29 '22 at 00:10
Typescript issue: go for the latest type for the package that is erroring - if multiple packages have the same error, make sure you're on the latest react type corresponding to the react package that you're using – Akber Iqbal Feb 23 '23 at 22:53

Type '{}' is not assignable to type 'ReactNode'

1 Answers1