React Redux Toolkit项目yarn build报错：Prefer named exports import/no-default-export

问题原因 #

这个错误来自ESLint的import/no-default-export规则，该规则强制要求使用命名导出而非默认导出。你的代码中export default orders.reducer;这一行违反了该规则，导致构建校验不通过。

解决方案 #

方法1：改为命名导出（推荐） #

修改Orders slice文件的导出语句，将默认导出替换为命名导出：

// 替换原来的 export default orders.reducer;
export const ordersReducer = orders.reducer;

同时，在你的Redux store配置文件中，也要对应修改导入方式：

// 替换原来的默认导入
import { ordersReducer } from './path/to/ordersSlice';

// 在configureStore中使用
export const store = configureStore({
  reducer: {
    orders: ordersReducer,
    // 其他reducer...
  },
});

修改后的完整Orders slice代码：

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { ORDER_SLICE } from 'constants/Constants';
import { envConfig } from 'envConfig';
import { httpClient } from 'httpClient';
import { GetOrdersType, OrdersType } from 'redux/interface/Orders';

const initialState: OrdersType = {
  data: null,
  totalCount: null,
  loading: false,
  error: null,
};

const orders = createSlice({
  name: ORDER_SLICE.NAME,
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(getOrdersData.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(getOrdersData.fulfilled, (state, action) => {
      state.loading = false;
      state.data = action.payload.orders;
      state.totalCount = Number(action.payload.pageable.totalCount);
    });
    builder.addCase(getOrdersData.rejected, (state, action) => {
      state.loading = false;
      state.error = action.payload;
    });
  },
});

// 改为命名导出
export const ordersReducer = orders.reducer;

export const getOrdersData = createAsyncThunk(
  ORDER_SLICE.GET_ORDERS_DATA,
  async (config:GetOrdersType, { rejectWithValue }) => {
    try {
      const response = await httpClient?.get(`${envConfig.apiOrders}?size=${config.size}&page=${config.currentPage}`);
      return response?.data;
    } catch (error: any) {
      console.log('error ', error);
      return rejectWithValue(error.message);
    }
  },
);

方法2：临时绕过ESLint规则（不推荐） #

如果暂时不想修改导出方式，可以在触发错误的代码行添加ESLint忽略注释：

export default orders.reducer; // eslint-disable-line import/no-default-export

这种方式只是临时规避校验，不符合规则的设计初衷，建议优先采用命名导出的方案。

内容的提问来源于stack exchange，提问作者Pradeep Bagga