I am getting an error related to redux-persist: Could not resolve "react"

Question

I am using the redux-persist and I was just adding it to the 'main.js' file but I keep getting this error:

Could not resolve "react"

    ../node_modules/redux-persist/es/integration/react.js:
21:37:
      21 │ ...Component } from 'react'; // eslint-disa...
         │                     ~~~~~~~
         ╵                     "./react"

  Use the relative path "./react" to reference the file
  "../node_modules/redux-persist/es/integration/react.js".
  Without the leading "./", the path "react" is being
  interpreted as a package path instead.

I tried to modify the node_modules/redux-persist/es/integration/react.js and change "import React, { PureComponent } from 'react';" to "import React, { PureComponent } from './react';" as it is written in the error but it is not working. I guess I have to fix something else but I do not know what it is.

Here is my code: main.js file:

    import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';
import { persistor, store } from './redux/store.js';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';

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

and store.js:

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import userReducer from './user/userSlice';
import { persistReducer, persistStore } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const rootReducer = combineReducers({ user: userReducer });

const persistConfig = {
  key: 'root',
  storage,
  version: 1,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

export const persistor = persistStore(store);

Answer 1

I am following the same tutorial as you (MERN Stack Modern Real Estate Marketplace) and ran into the same issue. The redux-persist package should have been installed in the client folder rather than the root folder. Once installed in the client folder it was solved. You can additionally uninstall from the root folder using npm uninstall redux-persist