Next.js项目跨文件夹导入文件报错求助：模块未找到

核心问题 #

你的导入存在两个关键错误：

1. 相对路径错误：AdminApp.tsx位于src/components/目录，而OverviewList.tsx在src/sidebar/目录，当前用./sidebar/是在components子目录下查找sidebar，显然不存在。
2. 导入语法不匹配：OverviewList是命名导出，但你使用了默认导入的语法，即使路径正确也无法正确加载组件。

修复步骤 #

1. 修正相对路径并匹配导入语法 #

直接修改AdminApp.tsx中的导入语句：

// src/components/AdminApp.tsx
// 替换原导入行
import { OverviewList } from "../sidebar/OverviewList.tsx";

• ../表示回到上一级目录（即src根目录），再进入sidebar目录定位到目标文件；
• 用{ OverviewList }的语法匹配命名导出规则。

可选方案：改为默认导出 #

如果你更习惯默认导入的写法，可以修改OverviewList.tsx的导出方式：

// src/sidebar/OverviewList.tsx
// 替换原export const行
export default OverviewList;

此时AdminApp.tsx的导入可以写成：

import OverviewList from "../sidebar/OverviewList.tsx";

额外注意事项 #

• Next.js支持省略.tsx/.ts扩展名，导入时可简写为../sidebar/OverviewList；
• 确保文件夹和文件名拼写完全一致（区分大小写，比如Sidebar和sidebar会被视为不同路径）。

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