"Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization" error in RTK Query

What exactly am I doing wrong here?

As soon as I add builder.addMatcher to extraReducers, I start getting an error. Everything works fine before I add it. totally the problem is related to my adding extraReducers. But I didn’t understand what I did wrong.

extraReducers: (builder) => {
    builder.addMatcher(
      authenticationApi.endpoints.postLogin.matchFulfilled,
      (state, { payload }) => {
        state.isLogin = true;
        state.token = payload.data;
      }
    )
  },

Store Slice Api Api call page Error

[markerikson]

I think the issue is you have a circular import problem. The API file is importing the baseQuery, baseQuery imports the auth action, and the auth slice imports the API.

You’re probably going to need to rearrange that logic to fix the circle.

I don’t have an immediate answer on how to best do that atm - ironically I’m in the middle of fixing a bunch of circular imports in my own app and that’s taking up all my brain space 😃

[MartinMasek]

The problem

I’ve resolved the issue so I think it deserves a little context first because I struggled to google answer fast.

My app uses Network.ts (basically a static class - singleton) file. The app uses Network.fetch instead of system fetch. The reason is so I can pass access token with every request.

Now this Network class is basically a wrapper around fetch and if it sees 401 it wants to dispatch empty auth state so user is shown “Not authenticated” screen

The issue is that when you init a new project using https://github.com/reduxjs/cra-template-redux-typescript (which you are so kind to contribute @markerikson) it doesn’t have a scenario for when you want to update the store from outside React component.

When there is UI action (say user clicks a button) it triggers Redux async action which uses internally the Network.ts class. That causes the problem as I described above.

The solution:

Keep the authSlice.ts file but create new auth-actions.ts, auth-reducers.ts and auth-types.ts The files can look like this (rather focus on the concept) auth-types.ts

export const AUTH_LOCAL_STORAGE_KEY = 'auth-token'
export const AUTH_SLICE_NAME = 'auth'
export const SET_AUTH_STATE_ACTION_NAME = 'setAuthState'

export type AuthReduxState = {
    isAuthenticated: boolean
    ... // other props
}

export const getEmptyAuthState = (): AuthReduxState => {
    return { ... }
}

auth-actions.ts

import authSlice from './authSlice'

export const { setAuthState, ... } = authSlice.actions

auth-reducers.ts

import authSlice from './authSlice'

export default authSlice.reducer`

The authSlice.ts file looks like a typical Slice with one change

export const authSlice = createSlice({
    name: AUTH_SLICE_NAME,
    initialState: getEmptyAuthState(),
    reducers: {
        [SET_AUTH_STATE_ACTION_NAME]: (_, action: PayloadAction<AuthReduxState>) => {
            return action.payload
        },
        ...
    },
})

export default authSlice

The store.ts has a slight change

import authReducers from './auth/auth-reducers'

reducer: {
        auth: authReducers,
    },

And finally the Network.ts can dispatch to store

...
if (result.status === 401) {
            localStorage.removeItem(AUTH_LOCAL_STORAGE_KEY)
            store.dispatch({ type: `${AUTH_SLICE_NAME}/${SET_AUTH_STATE_ACTION_NAME}`, payload: getEmptyAuthState() })
        }