ESLint提示Prefer default export错误，导入导出匹配问题求解

这问题我之前也碰到过，核心就是导出和导入的语法不匹配，再加上ESLint的规则约束，给你两个清晰的解决方向：

方案一：遵循ESLint规则，使用默认导出+默认导入 #

这个方案完全符合ESLint的Prefer default export要求，同时避免导入错误：

1. 修改HomePage文件的导出方式：
   把组件改成默认导出，不管是函数组件还是类组件都适用：

   // HomePage.jsx
   // 函数组件示例
   const HomePage = () => {
     return <div>Home Page</div>;
   };
   export default HomePage;
   
   // 类组件示例
   import React from 'react';
   export default class HomePage extends React.Component {
     render() {
       return <div>Home Page</div>;
     }
   }
   

2. 修改导入语句：
   去掉导入时的花括号，使用默认导入语法：

   import HomePage from './HomePage';
   

   这样既满足ESLint的规则，也不会出现导出找不到的错误。

方案二：保留命名导出，关闭ESLint的Prefer default export规则 #

如果你更习惯用命名导出，不想改导入语法，可以直接关闭ESLint的这条规则：

1. 保持HomePage的命名导出：
   用命名导出的方式导出组件：

   // HomePage.jsx
   // 函数组件示例
   export const HomePage = () => {
     return <div>Home Page</div>;
   };
   
   // 类组件示例
   import React from 'react';
   export class HomePage extends React.Component {
     render() {
       return <div>Home Page</div>;
     }
   }
   

2. 保留原有的命名导入语句：
   继续使用带花括号的导入：

   import { HomePage } from './HomePage';
   

3. 修改ESLint配置：
   在你的ESLint配置文件（比如.eslintrc.js、.eslintrc.json）中，关闭import/prefer-default-export规则：

   // .eslintrc.js
   module.exports = {
     // 其他已有的配置项
     rules: {
       // 新增这条规则关闭提示
       'import/prefer-default-export': 'off'
     }
   };
   

为什么你之前的尝试会出错？ #

你用export { default as Homepage };出现解析错误，是因为这条语句的前提是文件里已经存在一个default导出，但你当时可能并没有定义export default ...，所以语法无效。就算你先定义了默认导出，这种写法也属于多此一举，直接用上面两种方案的写法更清晰。

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