title: Nextjs Redux Persist Error - SyntaxError: Cannot use import statement outside a module
body: <p>I'm trying to use persistReducer in my Next.js, but I keep getting this error</p>
  <pre><code>   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';
  </code></pre>
  <p>This is my _app.tsx file looks like:</p>
  <pre><code>&lt;Providers&gt;
    &lt;Container&gt;
    &lt;Component {...pageProps} /&gt;
    &lt;/Container&gt;
  &lt;/Providers&gt;
  </code></pre>
  <p>This is my original store.ts looks like:</p>
  <pre class="lang-js prettyprint-override"><code>import { configureStore, Action } from &quot;@reduxjs/toolkit&quot;
  import { useDispatch } from &quot;react-redux&quot;
  import {
    persistStore,
    FLUSH,
    REHYDRATE,
    PAUSE,
    PERSIST,
    PURGE,
    REGISTER,
  } from &quot;redux-persist&quot;
  import { ThunkAction } from &quot;redux-thunk&quot;
  import rootReducer, { RootState } from &quot;./rootReducer&quot;
  
  const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) =&gt;
      getDefaultMiddleware({
        serializableCheck: {
          ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
        },
      }),
  })
  
  export const persistor = persistStore(store)
  
  export type AppDispatch = typeof store.dispatch
  
  export const useAppDispatch = () =&gt; useDispatch&lt;AppDispatch&gt;()
  
  export type AppThunk = ThunkAction&lt;void, RootState, unknown, Action&lt;string&gt;&gt;
  
  export default store
  
  </code></pre>
  <p>This is what I have tried changing it into:</p>
  <pre><code>import { configureStore, Action } from &quot;@reduxjs/toolkit&quot;
  import { useDispatch } from &quot;react-redux&quot;
  import {
    persistStore
  } from &quot;redux-persist&quot;
  import thunk from &quot;redux-thunk&quot;
  import rootReducer, { RootState } from &quot;./rootReducer&quot;
  
  export const store = configureStore({
    reducer: rootReducer,
    middleware: [thunk]
  })
  
  export const persistor = persistStore(store)
  
  export type AppDispatch = typeof store.dispatch
  
  export const useAppDispatch = () =&gt; useDispatch()
  </code></pre>
  <p>I am using React 17.x, Nextjs 12.x, TypeScript 4.x, React-redux 7.2.6, Redux-persist 6.0.0</p>