React应用导入Toaster组件报错：export 'Toaster'未找到问题求助

咱们一步一步拆解这个问题，核心就是导出和导入的名称不匹配，以及对React模块导出规则的小误解：

问题原因分析 #

1. 你的Toaster.js是默认导出组件：export default Toaster;，这种导出在导入时可以自定义名称，但你在ui/index.js里把它重命名成了Toast：import Toast from './Toaster';
2. 紧接着ui/index.js用命名导出对外暴露了这个组件：export { Toast }，这意味着./ui对外提供的组件名称是Toast，而非Toaster
3. 但你在app.js里却尝试用命名导入{Toaster}来获取组件，自然找不到对应的导出项，就抛出了这个错误。

两种可行的解决方法 #

方法一：修改app.js的导入和使用代码 #

既然./ui对外暴露的是Toast，那直接用这个名称导入和渲染就行：

// app.js 修改后
import { Toast } from './ui';
<Toast toasts={['toast1', 'toast2']} />

方法二：修改ui/index.js的导出逻辑，对外暴露Toaster名称 #

如果你想保持app.js里的Toaster名称不变，可以调整ui/index.js的导出：

方式A：导入时保留原名称再导出

// ui/index.js 修改后
import Toaster from './Toaster';
export { Toaster }

方式B：直接将默认导出转为命名导出（更简洁）

// ui/index.js 修改后
export { default as Toaster } from './Toaster';

这样修改后，app.js里的import {Toaster} from './ui'就能正确找到对应的组件了。

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