React项目部署Azure App Service报错：匿名箭头函数默认导出违规

错误原因 #

该报错由ESLint的import/no-anonymous-default-export校验规则触发：你的本地开发环境未开启该规则的严格校验，因此代码可正常运行；但Azure App Service的自动构建流程默认启用了严格ESLint校验，你直接匿名导出箭头函数的写法不符合规则要求，因此构建被中断。

方案1：修改代码适配规则（推荐） #

将箭头函数先赋值给命名变量，再做默认导出即可，改动后的代码如下：

alertReducer.js 调整后代码 #

import { SET_ALERT, REMOVE_ALERT } from "../types";

const alertReducer = (state, action) => {
  switch (action.type) {
    case SET_ALERT:
      return action.payload;
    case REMOVE_ALERT:
      return null;
    default:
      return state;
  }
};

export default alertReducer;

githubReducer.js 调整后代码 #

// Importing types
import {
  SEARCH_USERS,
  SET_LOADING,
  CLEAR_USERS,
  GET_USER,
  GET_REPOS,
} from "../types";

const githubReducer = (state, action) => {
  switch (action.type) {
    case GET_USER:
      return {
        ...state,
        user: action.payload,
        loading: false,
      };
    case GET_REPOS:
      return {
        ...state,
        repos: action.payload,
        loading: false,
      };
    case SEARCH_USERS:
      return {
        ...state,
        users: action.payload,
        loading: false,
      };
    case CLEAR_USERS:
      return {
        ...state,
        users: [],
        loading: false,
      };
    case SET_LOADING:
      return {
        ...state,
        loading: true,
      };

    default:
      return state;
  }
};

export default githubReducer;

方案2：禁用对应校验规则（临时解决方案） #

如果不想改动代码，可通过以下两种方式关闭该规则校验：

• 单文件禁用：在两个报错文件的第一行添加注释 /* eslint-disable import/no-anonymous-default-export */
• 全局禁用：在项目根目录的ESLint配置文件（.eslintrc.json/.eslintrc.js）的rules字段中添加配置：

{
  "rules": {
    "import/no-anonymous-default-export": "off"
  }
}

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