PersistGate stuck on loading when query parameter present in URL

Viewed 288

I'm using the example with-redux-persist repo paired with next.js found here: https://github.com/vercel/next.js/tree/canary/examples/with-redux-persist

When using a custom loading component, adding a query parameter to the URL, ie ?test=123, causes the page to hang on loading indefinitely. There are no errors reported in console and the redux state info looks clean.

Here is my _app.js I'm using to test this:

import { useStore } from '../store'
import { Provider } from 'react-redux'
import { persistStore } from 'redux-persist'
import { PersistGate } from 'redux-persist/integration/react'

export default function App({ Component, pageProps }) {
  const store = useStore(pageProps.initialReduxState)
  const persistor = persistStore(store)

  return (
    <Provider store={store}>
      <PersistGate loading={<div>Loading</div>} persistor={persistor}>
        <Component {...pageProps} />
      </PersistGate>
    </Provider>
  )
}

You can reproduce it by cloning the above repo, modifying _app.js to look like above, starting the server with yarn dev and then finally visiting http://localhost:3000/?test=123.

Any help or insight into why this is occurring is appreciated!

0 Answers
Related