本文详解 react 中因默认导出与命名导出混淆引发的 “module does not provide an export named 'x'” 错误，结合 vite + styled-components 项目场景，提供正确导出/导入写法、常见误区及验证方法。
本文详解 react 中因默认导出与命名导出混淆引发的 “module does not provide an export named 'x'” 错误，结合 vite + styled-components 项目场景，提供正确导出/导入写法、常见误区及验证方法。
在使用 React（尤其是 Vite 构建工具）开发时，你可能会遇到类似这样的控制台报错：
The requested module '../components/Works.jsx' does not provide an export named 'Works'
该错误并非模块路径错误或文件缺失，而是 ES 模块导出（export）与导入（import）方式不匹配 所致。核心问题在于：你在 App.jsx 中以命名导入形式引用 Works：
import { Works } from "../components/Works"
但 Works.jsx 中却使用了默认导出语法（且写法有误）：
// ❌ 错误写法（语法非法 + 导出类型不匹配）
export default Works = () => { ... }
这段代码存在两个严重问题：
- 语法错误：export default Works = () => {} 是非法 JavaScript —— 不能在 export default 后直接赋值给未声明的标识符；
- 语义冲突：import { Works } 要求目标模块提供名为 Works 的命名导出（named export），而 export default ... 只提供一个默认导出（default export），二者完全不兼容。
✅ 正确解法有两种，任选其一（推荐方案二，更清晰）：
✅ 方案一：改为命名导出（匹配当前 import 语法）
// src/components/Works.jsx
import React from 'react';
import styled from 'styled-components';
const Section = styled.div`
height: 100vh;
scroll-snap-align: center;
display: flex;
justify-content: center;
position: relative;
color: black;
font-size: 14px;
font-weight: 300;
`;
// 正确命名导出：先声明，再导出
const Works = () => {
return <section></section>;
};
export { Works }; // ← 命名导出，与 import { Works } 严格对应
✅ 方案二：改为默认导出（需同步修改 App.jsx 的 import）
// src/components/Works.jsx
import React from 'react';
import styled from 'styled-components';
const Section = styled.div`
height: 100vh;
scroll-snap-align: center;
display: flex;
justify-content: center;
position: relative;
color: black;
font-size: 14px;
font-weight: 300;
`;
// 正确默认导出写法（推荐）
export default function Works() {
return <section></section>;
}
// 或：export default () => <section></section>;
同时，更新 App.jsx 中的导入语句：
// src/App.jsx import Works from "../components/Works"; // ← 去掉大括号，使用默认导入
⚠️ 关键注意事项：
- import { X } ↔ export { X }（命名导入/导出，名称必须完全一致，区分大小写）；
- import X from '...' ↔ export default X（默认导入/导出，左侧名称可任意）；
- Vite 和现代 bundler 对 ES 模块规范非常严格，不存在“自动 fallback”行为；
- IDE（如 VS Code）悬停提示中若显示 import Works from ... 却实际是 { Works }，说明导出定义与导入不一致，这是最快速的定位线索；
- 确保文件扩展名一致（.jsx vs .js），Vite 默认支持 .jsx，但若混用需检查配置。
? 验证技巧：在 Works.jsx 文件末尾临时添加 console.log('Works loaded')，若控制台无输出，说明模块根本未被正确解析 —— 这往往是导出/导入不匹配的早期信号。
遵循以上规范后，Works 组件即可被正常识别和渲染，不再触发 Module does not provide an export named 'Works' 报错。
