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




