Redux无法在初始化之前访问ウ__WEBPACK_DEFAULT_EXPORT__Ж,

bwleehnv  于 2022-11-12  发布在  Webpack
关注(0)|答案(1)|浏览(283)

我在react项目中升级一些包的时候,正在重构一些相对较旧的代码。导入代码的组织和格式由prettier处理。
在重构的几分钟后,我遇到了Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization。在做了一些挖掘之后,我发现在其中一个文件中,导入顺序是问题所在。
这是出错前的导入订单

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

这是发生错误后的导入顺序

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

虽然我想在保存文件时组织导入,但恢复到以前的导入顺序是可行的。
源代码/redux/存储.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/身份验证.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;
tjrkku2a

tjrkku2a1#

我认为问题其实很简单您所需要做的就是遍历一些包含redux服务的代码,并查看是否有一个reducer在其初始化之前被使用,或者是否一切正常;可能你需要在你的eslint配置中使用import-sorts-order规则,这样当你保存它的时候,它会自动优化导入。你这里遇到的问题叫做circular-dependecy-issue

相关问题