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

Rikus Wiehahn · Accepted Answer · 2022-05-19 21:27:11Z

5

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";

answered May 19, 2022 at 21:27

Rikus Wiehahn

513 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oleksii Shkulipa · Accepted Answer · 2022-08-11 08:58:31Z

0

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';

answered Aug 11, 2022 at 8:58

Oleksii Shkulipa

5166 silver badges5 bronze badges

Comments

andiua · Accepted Answer · 2023-09-20 12:57:35Z

0

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

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

answered Sep 20, 2023 at 12:57

andiua

11 bronze badge

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related