Redux不能访问'__WEBPACK_DEFAULT_EXPORT__'之前初始化

Question

当我升级react项目中的一些包时，我正在重构一些相对较旧的代码。代码的导入组织和格式化由prettier处理。

重构几分钟后，我遇到了Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization。在做了一些调查之后，我发现在其中一个文件中，导入顺序是问题所在。

这是错误

之前的导入顺序

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

这是Error

之后的导入顺序

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

恢复到以前的导入顺序可以工作，但我想在保存文件时组织导入。

src/回来的/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/回来的/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;

Answer 1

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