React项目相对路径导入组件失败，多种尝试无效求排查

问题情况 #

项目中编辑器组件导入样式主题时出现路径错误，原导入代码：

import { light as lightTheme, dark as darkTheme } from "styles/theme";

触发报错：

Module not found: Error: Can't resolve 'styles/theme' in '/xxxx/test/moz-todo-react/src/editor'

已尝试以下三种导入写法，均未解决：

• from "src/editor/styles/theme";
• from "./src/editor/styles/theme";
• from "./styles/theme";

问题原因分析 #

1. 无别名的绝对路径写法无效 #

styles/theme和src/editor/styles/theme这类不带.//../的路径，默认会去项目的node_modules目录查找模块，除非你在打包工具（Webpack/Vite等）中配置了路径别名（比如把src或styles映射到对应目录），否则打包工具无法识别这些路径对应的实际文件位置，必然报错。

2. 相对路径写法错误 #

./src/editor/styles/theme这种写法是相对于当前文件所在目录的路径，当前文件已经在/src/editor下，使用该路径会指向/src/editor/src/editor/styles/theme，显然不存在这个目录，所以报错。

3. ./styles/theme仍报错的可能原因 #

如果你的theme.js文件确实在src/editor/styles/目录下，那这个路径是理论正确的，若仍报错，大概率是以下问题：

• 文件名/目录名大小写不匹配：比如实际文件是Theme.js但你写的是theme.js，在区分大小写的系统（如Linux/macOS）下会导致找不到文件；
• 导出方式错误：theme.js中没有正确导出light和dark对象，比如用了module.exports而非ES6的export const light = ...；
• 打包工具配置异常：比如Webpack的resolve.extensions没配置.js/.jsx等后缀，导致找不到对应文件；或是Vite的resolve.alias配置冲突。

解决建议 #

1. 优先使用正确的相对路径：如果当前文件在src/editor目录下，直接用./styles/theme，同时检查文件名大小写和导出方式；
2. 配置路径别名（推荐）：在打包工具中配置别名，比如把@映射到src目录，之后可以用@/editor/styles/theme这种简洁的绝对路径导入，避免层级混乱；
3. 检查打包工具的resolve相关配置，确保文件后缀、路径映射等设置正确。

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