React导入错误求助：'Learning'未找到，仅存在Learn导出

错误原因 #

你在App.js中尝试导入名为Learning的组件，但./Component/react文件实际导出的组件名称是Learn，导入名称与导出名称不匹配，导致编译报错。

解决方案 #

有两种修复方式，任选其一即可：

方式一：修改App.js的导入语句 #

将导入Learning的代码替换为导入Learn，同时使用组件时也要对应调整名称：

// 原错误代码
import { Learning } from './Component/react';

// 修改后正确代码
import { Learn } from './Component/react';

// 使用组件时也要改成<Learn />
function App() {
  return (
    <div className="App">
      <Learn />
    </div>
  );
}

方式二：修改组件文件的导出名称 #

如果希望保持Learning作为组件名称，直接修改./Component/react文件中的导出语句：

// 原错误导出代码
export const Learn = () => {
  // 组件内容
};

// 修改后正确导出代码
export const Learning = () => {
  // 组件内容
};

修改后，App.js中原本的import { Learning } from './Component/react';即可正常使用。

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