You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多
文档控制台
免费开始使用

React导出图片时触发ESLint错误:prefer default export

解决React导出图片时的ESLint 'prefer default export'错误

这个错误是因为ESLint的prefer-default-export规则在起作用:它要求如果一个模块里只有单个导出,应该使用默认导出而非命名导出。你当前的写法是把图片的默认导出(图片文件本身的导出就是默认类型)包装成命名导出再导出,刚好触发了这条规则。下面给你几个实用的解决方法:

方法1:改成默认导出(推荐)

如果这个文件只用来导出这一张图片,直接用默认导出完全符合规则,写法也更简洁:

// 写法一:简洁版
export default from './ArrivalsDepartures.jpg';

// 写法二:更清晰的显式写法
import ArrivalsDeparturesImage from './ArrivalsDepartures.jpg';
export default ArrivalsDeparturesImage;

之后导入时就用:

import ArrivalsDeparturesImage from './你的文件路径';

方法2:禁用该规则(按需选择)

如果你确实需要保留命名导出(比如这个文件后续还要添加其他导出内容),可以选择:

单个文件临时禁用

在文件顶部添加ESLint注释,只对当前文件关闭这条规则:

/* eslint-disable prefer-default-export */
export { default as ArrivalsDeparturesImage } from './ArrivalsDepartures.jpg';

全局修改ESLint配置

在你的ESLint配置文件(比如.eslintrc.js.eslintrc.json)中,把prefer-default-export规则设为关闭,或者调整它的选项:

module.exports = {
  // 其他配置项...
  rules: {
    // 完全关闭规则
    'prefer-default-export': 'off',
    // 或者允许单个命名导出的例外(部分ESLint版本支持)
    // 'prefer-default-export': ['error', { allowNamedExports: true }]
  }
};

内容的提问来源于stack exchange,提问作者Raziel

火山引擎 最新活动