React项目中SectionWrapper导出导入报错求助

错误原因 #

你在About.jsx中使用命名导入方式引入SectionWrapper，但SectionWrapper.jsx本身是默认导出，同时hoc/index.js的导出写法也不符合命名导入的要求，导致模块找不到对应的命名导出项。

解决方案（二选一即可） #

方案1：修改About.jsx的导入语句

将默认导出的模块用默认导入方式引入，去掉花括号：

// 原导入语句
import { SectionWrapper } from '../hoc/SectionWrapper'

// 修改后
import SectionWrapper from '../hoc/SectionWrapper'

方案2：修正hoc文件夹的导出规则（支持命名导入）

如果你想保持命名导入的写法，需要调整hoc/index.js的导出方式：

// 原hoc/index.js
import SectionWrapper  from "./SectionWrapper";
export default { SectionWrapper }

// 修改后
import SectionWrapper  from "./SectionWrapper";
export { SectionWrapper }

同时修改About.jsx的导入路径为../hoc（利用index.js作为文件夹入口）：

import { SectionWrapper } from '../hoc'

额外说明 #

• 默认导出的模块，导入时不需要花括号；命名导出的模块，导入时必须用花括号匹配导出名称。
• 你的SectionWrapper.jsx中是export default SectionWrapper，属于默认导出，所以方案1是最直接的修复方式。

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