redux-persist icon indicating copy to clipboard operation
redux-persist copied to clipboard

'PersistGate' cannot be used as a JSX component.

Open ajnozari opened this issue 3 years ago • 10 comments

This is a rather new issues that's suddenly popped up.

Previously working config now reports PersistGate is not a valid JSX component?

ajnozari avatar Apr 08 '22 08:04 ajnozari

Same issue happening to me today

AndrePereiraSF avatar Apr 08 '22 14:04 AndrePereiraSF

If I'm understanding this issue, it's due to an update to React to v18.

React-redux uses "*" for the type on @types/react

A workaround add :

"resolutions": {
    "@types/react": "17.0.43"
}

to your package.json

ajnozari avatar Apr 08 '22 17:04 ajnozari

try this:

"devDependencies": {
    "@types/react": "18.0.0"
  },

fregayeg avatar Apr 18 '22 12:04 fregayeg

"@types/react": "17.0.43" tried but it doesn't work

dohuuhuy avatar Apr 21 '22 03:04 dohuuhuy

image

Has anyone encountered this error?

dohuuhuy avatar Apr 21 '22 03:04 dohuuhuy

Solution if you are using React v17 with Yarn and/or npm 18.3.0+

For those who are using Yarn, as suggested by @ajnozari add the following to your package.json:

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

For those who are using npm version 8.3.0+ add the following to your package.json, remove node_modules and do npm install again:

"overrides": {
  "@types/react": "17.0.44"
}

Both that options will force yarn or npm to install and use this specific version of react types for all installed packages. Note: version 17.0.44 is not mandatory, use any version you want, it just should be consistent in all places in your package.json. So in my case my package.json looks like this:

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

avasuro avatar Apr 22 '22 16:04 avasuro

Same issue happening to me today

Ryan-cyi avatar Apr 28 '22 03:04 Ryan-cyi

This worked for me, thanks @avasuro. Also I updated react-dom version :

"devDependencies": {
  "@types/react": "17.0.44",
  "@types/react-dom": "17.0.17",
},
"overrides": {
  "@types/react": "17.0.44"
},
"resolutions": {
  "@types/react": "17.0.44"
}

fawaz-ahmed avatar Jun 23 '22 12:06 fawaz-ahmed

If I'm understanding this issue, it's due to an update to React to v18.

React-redux uses "*" for the type on @types/react

A workaround add :

"resolutions": {
    "@types/react": "17.0.43"
}

to your package.json

This won't affect all your dependencies and make them resolve the React types from a version 17.0.43 when we actually want to update to React 18?

duranmla avatar Jul 28 '22 13:07 duranmla

It seems more accurate to update react and react-dom types https://stackoverflow.com/a/71848896/1422380

duranmla avatar Jul 28 '22 14:07 duranmla