redux , invalid hook call. Hooks can only be called within the function component body

Question

When I set up and use the Provider in root.render, it shows me this error:

Warning: Invalid hook call. Hooks can only be called internally The body of the function component. This may happen in one of the Here’s why:

1. Your React and renderer versions may not match (e.g. React DOM)
2. You may be violating Hooks rules
3. You may have multiple copies of React in the same app and TypeError is not caught: Cannot read property of null (read 'useMemo')

It's just for the Provider component, if I don't call it I don't get this error.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider>
    <App />
  </Provider>
);

reportWebVitals();

I uninstalled the redux and npm packages and installed them using the latest versions, but I'm having the same problem. Some say it could be because there are the same names in both packages, which confuses the computer, but I don't think so.

Answer 1

You need to pass store to Provider

import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from "./path/to/store"

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

reportWebVitals();