[Fix] Type error – Type ‘{}’ is not assignable to type ‘ReactNode’

Recently I have been getting these type errors when I was trying to create react typescript projects for certain packages; the error is Type ‘{}’ is not assignable to type ‘ReactNode”. A snippet of the error is given below:

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

I would like to share the steps that helped me out to fix the error, ‘Type ‘{}’ is not assignable to type ‘ReactNode”

Why Type ‘{}’ is not assignable to type ‘ReactNode’ error is seen?

This error is seen because @types/react-dom has its own dependencies and one of them is @types/react with a version set to '*' – a major release, that now, probably, refers to 18.Even if you specify some strict versions in your package.json (without ^) parent package might install its own duplicates of packages that you are already using for its own purposes.

A simple solution to fix to this is to add the resolutions in the package.json file of your project and run the yarn command

A detailed solution to fix the Type ‘{}’ is not assignable to type ‘ReactNode’ is provided below:

How to Fix Type ‘{}’ is not assignable to type ‘ReactNode’ error?

Fix: Method for yarn Users:

To fix Type ‘{}’ is not assignable to type ‘ReactNode’ error for yarn users, add the below-mentioned code in the package.json file of your project and run the yarn command

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

Fix: For npm Users

To fix Type ‘{}’ is not assignable to type ‘ReactNode’ error for npm users, add the below-mentioned code to your package.json file

"resolutions": {
  "@types/react": "^17.0.38"
}

Since you are using npm, you will also need to add this in the “scripts” section of your package.json

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

This will make  npm-force-resolutions package to fix versions from resolutions.

And then after doing npm install, the error should be fixed.

Conclusion

To fix the Type ‘{}’ is not assignable to type ‘ReactNode’ error; If you are an yarn user, fix this the error by adding resolutions in the package.json file and run the yarn command to completely fix the error. If you are an npm user add the resolutions in the package.json file of your project, you will also need to add an additional command to your scripts section. After all the additions doing a simple npm install the error should be fixed.