CODEWITHSUNDEEP
javascriptreactjstypescript
user20659824
user20659824

Reputation:

'Provider' cannot be used as a JSX component. Its instance type 'Provider<AnyAction>' is not a valid JSX element. TS2786

Makes the Redux store available to the connect() calls in the component hierarchy below.

'Provider' cannot be used as a JSX component. Its instance type 'Provider' 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("C:/Users/Nilay/Desktop/nilay/src/pages/Home/Reel/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'.ts(2786)

can anyone can tell how to fix this i have tried npm install again my node version is 18plus

img here

    import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { store } from "./app/store";
import { Provider } from "react-redux";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter as Router } from "react-router-dom";
import { ApolloProvider } from "@apollo/client";
import { apolloClient } from "./utils/index";

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <ApolloProvider client={apolloClient}>
        <Provider store={store}>
          <App />
        </Provider>
      </ApolloProvider>
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);


serviceWorker.unregister();

Upvotes: 1

Views: 4375

Answers (2)

grreeenn
grreeenn

Reputation: 2545

It happened to me because two packages I'm using, and at this point must use, in their exact versions, were installing two different versions of @types/react. Thanks to @Alex Shani's answer I found a way to work around it - I'm using Yarn 1, so I added this to my package.json:

"resolutions": {
  "@types/react": "*"
},

I know it's not the optimal way, but since it's only types which don't run in runtime anyways, I decided to use this until the older lib gets an update which fixes it.

Upvotes: 0

Alex Shani
Alex Shani

Reputation: 161

It seems like @types/react problem with multiple versions. Try to uninstall react-redux and react (check that the dependencies removed) and install again.

Also try to install @types/react, its installed through dependencies.

Some workarounds can be found here: https://github.com/facebook/react/issues/24304#issuecomment-1094565891

Upvotes: 4

Related Questions