Nextjs Redux Persist Error - SyntaxError: Cannot use import statement outside a module

Question

I'm trying to use persistReducer in my Next.js, but I keep getting this error

   error - SyntaxError: Cannot use import statement outside a module
    /Users/xx/node_modules/redux-persist/es/persistReducer.js:11
    import { FLUSH, PAUSE, PERSIST, PURGE, REHYDRATE, DEFAULT_VERSION } from './constants';

This is my _app.tsx file looks like:

<Providers>
  <Container>
  <Component {...pageProps} />
  </Container>
</Providers>

This is my original store.ts looks like:

import { configureStore, Action } from "@reduxjs/toolkit"
import { useDispatch } from "react-redux"
import {
  persistStore,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist"
import { ThunkAction } from "redux-thunk"
import rootReducer, { RootState } from "./rootReducer"

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
})

export const persistor = persistStore(store)

export type AppDispatch = typeof store.dispatch

export const useAppDispatch = () => useDispatch<AppDispatch>()

export type AppThunk = ThunkAction<void, RootState, unknown, Action<string>>

export default store

This is what I have tried changing it into:

import { configureStore, Action } from "@reduxjs/toolkit"
import { useDispatch } from "react-redux"
import {
  persistStore
} from "redux-persist"
import thunk from "redux-thunk"
import rootReducer, { RootState } from "./rootReducer"

export const store = configureStore({
  reducer: rootReducer,
  middleware: [thunk]
})

export const persistor = persistStore(store)

export type AppDispatch = typeof store.dispatch

export const useAppDispatch = () => useDispatch()

I am using React 17.x, Nextjs 12.x, TypeScript 4.x, React-redux 7.2.6, Redux-persist 6.0.0

Answer 1

I had this problem after accidentally importing persistStore from the wrong location. Check that you have imported it directly from redux-persist!

import { persistStore } from "redux-persist";

Answer 2

i had same issue, try this one:

import {
 FLUSH,
 PAUSE,
 PERSIST,
 PURGE,
 REGISTER,
 REHYDRATE,
 persistReducer,
 persistStore 
} from 'redux-persist';
import storage from 'redux-persist/lib/storage';

Answer 3

I had similar situation. Maybe will help somebody. On the page component check your PersistGate import

import { PersistGate } from 'redux-persist/integration/react';