'Provider' cannot be used as a JSX component

[Jared-Dahlke]

What version of React, ReactDOM/React Native, Redux, and React Redux are you using?

• React: 16.13.1
• ReactDOM: 16.13.1
• Redux: 4.0.5
• React Redux: 7.2.1

What is the current behavior?

get this error when i try to run:
'Provider' cannot be used as a JSX component'

I think it has to do with new @react/types v18

What is the expected behavior?

no error

Which browser and OS are affected by this issue?

all

Did this work in previous versions of React Redux?

• Yes

[markerikson]

@Methuselah96 , @eps1lon : we've been seeing several reports of this. Is there something else with @types/react-redux that needs to be changed to deal with @types/react@18?

This issue describing @types/styled-components feels potentially related:

DefinitelyTyped/DefinitelyTyped#59765

[Methuselah96]

This means that there are conflicting versions of @types/react installed (one of them @types/react@^18 and the other @types/react@^16 || ^17). I would recommend trying to combine them in your package lock file or using package resolutions by adding this to your package.json:

If you're using Yarn:

  "resolutions": {
    "@types/react": "^16 || ^17"
  }

If you're using npm:

  "overrides": {
    "@types/react": "^16 || ^17"
  }

[Methuselah96]

Is there something else with @types/react-redux that needs to be changed to deal with @types/react@18?

It works fine with @types/react@18, it just doesn't work with the combination of @types/react@^18 and @types/react@^16 || ^17. Having multiple versions of @types/react has always technically been problematic in theory, but not always in practice because the use of skipLibCheck is prolific and the conflicting type definitions didn't usually cause errors in app types.

I'm not sure if there's a way to get React types to work with multiple major versions present. Either way, it's always been advisable to only have a single version of @types/react installed.

[Jared-Dahlke]

I put this in my package.json to fix it:
"overrides": { "@types/react": "16.9.48" }

you have to have at least version 8 of npm installed to enable overrides.

I have quite a few dependencies that are using a wildcard * for their @react/types dependencies which is causing this problem.

also, if you want to, You can force devs to use that version of npm by putting it in the package.json
"engines": { "node": "14.16.1", "npm": "8.6.0" },

also had to use npm install --force now which I do not like, but had to get this stop gapped for now. Will be monitoring this and hope to find a better approach such as upgrading or being more specific in my overrides declarations, something like that.

[eps1lon]

I am not able to reproduce these issues. Is somebody able to provide either a TypeScript playground or cloneable repository for investigation?

[eps1lon]

If you're seeing "SomeComponent cannot be used as a JSX component." after installing React 18 types make sure to only have a single version of @types/react installed.
Try to dedupe it first by removing it's lockfile entry and running npm/yarn again.
If you still see duplicate versions of @types/react (yarn why @types/react or npm ls @types/react) try resolutions with yarn or npm-force-resolutions with npm.

The issue is not caused by a specific version of @types/react but having types for 18 and before 18 installed at the same time.

[kimbaudi]

I received a similar error yesterday: 'Transition' cannot be used as a JSX component in a component that uses react-transition-group and @types/react-transition-group after I updated to @types/react v18 and @types/react-dom v18.

I first tried to delete the node_modules folder and yarn.lock file and reinstall, but the error persisted so I used overrides in my package.json and that got rid of the error.

  "overrides": {
    "@types/react": "17.0.43",
    "@types/react-dom": "17.0.14"
  },

Today, I tried again to delete the node_modules folder and yarn.lock file and reinstall. I also removed the overrides in my package.json. I'm not sure what happened, but I no longer get the error and I don't have to use overrides or resolutions.

[hellatan]

Thanks for mentioning the multiple versions @Methuselah96! It's been awhile since I've had to update react types so I forgot about that little tidbit 🤪

I'm not sure if there's a way to get React types to work with multiple major versions present. Either way, it's always been advisable to only have a single version of @types/react installed.

We use yarn at my work so I am able to use the resolutions field in my package.json. After adding

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

to my package.json and then running yarn, my yarn.lock file removed the @types/react@^17.x.x dependency, leaving the @types/react@^18.x.x version. My issues like 'Provider' cannot be used as a JSX component and Type '{}' is not assignable to type 'ReactNode', etc were then resolved, which I'm extremely grateful for b/c I really didn't want to have to update anything in DefinitelyTyped 😂. This is especially helpful if you use relay and have legacy fragment containers.

@kimbaudi I think what you experienced is probably close to what I experienced if you're looking for a possible explanation. Though overrides is a npm config field and resolutions is a yarn config field.

[imt-jaime]

Tried to change "jsx" property from tsconfig.json file to "react" instead of "react-jsx" and it worked.
Maybe the conflict is between TypeScript JSX types and React internal JSX types, using react types it seems to be solved.
{ "compilerOptions": { "jsx": "react" } }

[markerikson]

I'm going to go ahead and close this, but I'll pin the issue for visibility.

[kukovisuals]

2 hours deep in this and can't figure it out, I tried the options above but no luck, this is the error I get
TS2741: Property 'children' is missing in type '{ store: EnhancedStore<{ counter: CounterState; }, AnyAction, never[]>; }' but required in type 'ProviderProps<AnyAction, any>'.

TS2739: Type '{}' is missing the following properties from type 'ProviderProps<AnyAction, any>': store, children

index.tsx

I'm 1 month old in typescript so, I think is something simple I don't know yet.

[markerikson]

@kukovisuals : per the above discussion, you need to tell your package manager to force only using @types/react@18 and @types/react-dom@18. Your project is currently using v16.9 for the React types, but also React-Redux v8.

Actually the other issue here is that you're also using React 16 as well. Technically you can update the @types/react and @types/react-dom packages to 18 while still using React 16, but it's also a good idea to consider upgrading to React 18 as well.

[kukovisuals]

wow, That's so embarrassing. 😆 I'm such a newbie with Typescript and it wasn't even typescript the slash in <Provider/> was messing me up. It's confusing from someone just getting started with Typescript to see that error. Unreal how my eyes betrayed me like that. Maybe I need glasses or something lol

[markerikson]

Hah, fwiw I didn't even notice that either :)

[chenEdgar]

I received a similar error yesterday: 'Transition' cannot be used as a JSX component in a component that uses react-transition-group and @types/react-transition-group after I updated to @types/react v18 and @types/react-dom v18.

I first tried to delete the node_modules folder and yarn.lock file and reinstall, but the error persisted so I used overrides in my package.json and that got rid of the error.

  "overrides": {
    "@types/react": "17.0.43",
    "@types/react-dom": "17.0.14"
  },

Today, I tried again to delete the node_modules folder and yarn.lock file and reinstall. I also removed the overrides in my package.json. I'm not sure what happened, but I no longer get the error and I don't have to use overrides or resolutions.

I changed my dependences version and it work now