7

I've recently updated my react-router-dom to v6. The new version is very strict about the types used. When I use a redux provider in my code I get the following error message:

TS2786: 'Provider' cannot be used as a JSX component.

But it is fine for other providers:

root.render(
  <FirebaseAppProvider firebaseConfig={firebase}>
    <Provider store={store}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<div>hello</div>} />
        </Routes>
      </BrowserRouter>
    </Provider>
  </FirebaseAppProvider>,
);

Do you have any solution rather than ts-ignore?

pesehr
  • 787
  • 2
  • 9
  • 23

2 Answers2

9

This seems to occur recently when you have multiple versions of @types/react installed through dependencies.

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

phry
  • 35,762
  • 5
  • 67
  • 81
  • 1
    I ran `yarn upgrade` to get my `@types/react` on the latest version and that fixed this for me – LRitter Aug 23 '22 at 19:34
  • Had the problem that I had it globally and locally (in a project) installed. Removing the global available node modules did the trick. – alexander Nov 09 '22 at 10:39
0

This is issue of React 18. Can add {/* // @ts-ignore */} to ignore it. But not recommended

Kiz
  • 1
  • 1