Type ‘{}’ is not assignable to type ‘ReactNode’ module not used as JSX

module cannot be used as a JSX component; Type ‘{}’ is not assignable to type ‘ReactNode’ because React 18 has some breaking changes like ReactDOM.render() is deprecated.

You need to upgrade your packages to be compatible with React 18, or degrade your own React version in package.json.

But even then the issue remains. This is because sometimes libraries install their dependency packages even if you already have them.

For example, React-Dom is dependent on React. And React-dom is using * version of React. That is, the latest version. Now suppose you are targeting some specific version of react like 17.0.2, then React-dom might install React 18.2.0 because of it’s dependency on latest version.

Due to this double react packages, some modules cannot be used as JSX components.

Solution

The solution is to force other packages to depend on installed version of React. This can be done using resolutions in package.json.

Open package.json and add this property –

"resolutions": {
  "@types/react": "17.0.2",
  "@types/react-dom": "17.0.2"
},

1. If you use yarn then run yarn command.

2. If you are using npm then you need npm-force-resolutions package. Simply add the below code in script property of package.json –

"scripts": {
  ...
  "preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions"
}

Now run npm install.

3. If you are using pnpm then you will need to add overrides property. Like this –

"pnpm": {
  "overrides": {
    "@types/react": "^17.0.2",
    "@types/react-dom": "17.0.2"
  }
}

What packages are showing this error?

A number of packages are showing this error. Some of them are –

1. TimeAgo

'TimeAgo' cannot be used as a JSX component.
  Its instance type 'ReactTimeago<keyof IntrinsicElements | ComponentType<{}>>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/home/user/app/node_modules/@types/react-bootstrap-table-next/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.

2. FontAwesome

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

3. ErrorBoundary

'ErrorBoundary' cannot be used as a JSX component.
  Its instance type 'ErrorBoundary' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/home/ext_em/code/innova-web-ui-proto/node_modules/@types/react-redux/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.