I'm trying to setup a NextJS app with an already configured Redux store.

The Redux store lives in the parent directory of the app, stored in a common folder with the store, actions, reducers, sagas etc. This is so that when handling global state on an application (Web & Mobile app), all files relating to the Redux Store are configured once and shared across all platforms (since we are also using Redux Sagas to asynchronously fetch data and update state accordingly) as opposed to creating multiple copies of the same Redux store, the same actions, reducers and sagas for each application.

This is my _app.tsx file:

import type { AppProps } from 'next/app'

/* 
SETUP REDUX STORE, REDUX SAGAS, REDUX PERSIST SO THAT CWP CAN GLOBALLY MANAGE STATE,
HANDLE STATE ASYNCHRONOUSLY AND PERSIST STORE IN BROWSERS LOCALSTORAGE
*/

import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import _store from '../../common/store'

function MyApp({ Component, pageProps }: AppProps) {
  const { store, persistor } = _store()

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

export default MyApp

The error I receive when attempting to run my application on localhost:3000 is

Module parse failed: Unexpected token (13:37)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| let _persistor
| 
> export default function (initialState: AppState = {}, forceNewStore?: boolean) {
|   // It's very important to only return the cached store on the client, otherwise SSR will return the previous request state
|   // @ts-ignore

I believe this error is caused because I am trying to use a file outside of the applications directory (_store from '../../common/store.ts')

How would I setup my NextJS config to use this already configured Redux file?