2023-06-18

Migrate CRA to Vite causes "Cannot access 'store' before initialization" using Redux Toolkit

I've googled for days, and I just can't seem to solve the bug. So here I go. I know it's all about circular dependencies, but it doesn't seem like I can just rewrite it.

First I'm initializing the store in its own file

/redux/store
const store = configureStore({ ... })
export default store;

Then in an API file, I use a util function (coming later) that is used in multiple places around the app. Here is an example

/api/configApi
import { createApi } from '@reduxjs/toolkit/dist/query/react';
import { getConfig } from 'utils/getConfig';

const token = getConfig(env.key);
export const configApi = createApi({ token, ... })

Then I am using store again, and sadly before it is initialized

/utils/getConfig
import store from 'redux/store'

export function getConfig(key) {
  const config = store.getState()... // <-- Cannot access store before initialization
}

And the app itself

/src/index.tsx
... imports ...

const app = (
  <StrictMode>
    <ReduxProvider store={store}>
      <App />
    </ReduxProvider>
  </StrictMode>

ReactDOM.render(app, document.getElementById('root'));

All this about that it is a circular dependency makes sense to me. But I can't just make an export from another file. I have to use store in getConfig

How can this be solved?

It works smoothly using react-scripts but blocks the whole procedure migrating to Vite.



No comments:

Post a Comment