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.
Comments
Post a Comment