Redux Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

Question

I am refactoring some relatively old code as I upgrade some packages on a react project. Import organization and formatting of code is handled by prettier.

A few minutes into the refactoring, I was encountered with Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization. After doing a little digging, I discovered that in one of the files, the import order was the issue.

This was the import order before the error

import { RootState, useAppDispatch } from '../../../redux/store';
import { logoutAsyncThunk } from '../../../redux/authentication';

This is the import order after the Error

import { logoutAsyncThunk } from '../../../redux/authentication';
import { RootState, useAppDispatch } from '../../../redux/store';

Reverting to the previous import order works though I would like to organize imports upon saving a file.

src/redux/store.ts

import { configureStore } from '@reduxjs/toolkit';
import { useDispatch } from 'react-redux';
import authenticationReducer from './authentication';

const store = configureStore({
  reducer: {
    authentication: authenticationReducer,
    // other reducers...
  },
  devTools: true,
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [
          'authentication/logoutAsyncThunk/fulfilled',
        ],
      },
    }),
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch = () => useDispatch<AppDispatch>();
export default store;

sc/redux/authentication.ts

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { AxiosResponse } from 'axios';
import { logout } from '../services/api';
import { IAuthenticationInitialState } from './types';

export const logoutAsyncThunk = createAsyncThunk<AxiosResponse>(
  'authentication/logoutAsyncThunk',
  async () => await logout(),
);

export const initialState: IAuthenticationInitialState = {
  token: {},
  initialAuthenticationCheck: false,
};

const authenticationSlice = createSlice<IAuthenticationInitialState, {}, 'authentication'>({
  name: 'authentication',
  initialState,
  reducers: {},
  extraReducers: builder =>
    builder.addCase(logoutAsyncThunk.fulfilled, state => {
      state.authenticatedUser = undefined;
      state.token = {};
      state.decodedTokenInfo = undefined;
      window.location.assign('/');
    }),
});

export default authenticationSlice.reducer;

Mohammed Zourdy · Accepted Answer · 2022-09-15 12:44:04Z

3

I think the issue here is quite simple, actually; All you need to do is walk through some of your code that contains redux services and see if there is a reducer being used before its initialization or if everything Is good; probably you need to use import-sorts-order rules on your eslint config so, in that way when you save it, it is automatically optimize the import. The problem you have here is called circular-dependecy-issue.

answered Sep 15, 2022 at 12:44

Mohammed Zourdy

417 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Redux Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related