React项目导入文件提示超出src目录的问题排查求助

我正在做Redux练习项目，碰到个导入错误——明明文件在src目录里，系统却提示我导入的文件在src外面。试过改文件夹结构、迁移到新的React App，错误还是没消。想找到问题根源，避免以后再踩坑。

错误信息 #

Compiled with problems:X
ERROR in ./src/Users.js 4:0-43
Module not found: Error: You attempted to import ../FakeData.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.

文件夹结构 #

出错的Users组件代码 #

import {createSlice} from '@reduxjs/toolkit';
import { UsersData } from '../FakeData.js';

export const userSlice = createSlice({
        name: 'users',
        initialState: {value: UsersData },
        reducers: {
            addUser: (state, action) => {
                // Write code for adding a user 
            }
        },
        
    }
);

export default userSlice.reducer; 

问题根源&解决方法 #

• 相对路径写错了：从截图看，Users.js和FakeData.js都在src目录下，你用../FakeData.js会跳出src目录找文件，肯定报错。把导入路径改成./FakeData.js就行。
• 检查文件名大小写：如果是Linux/macOS系统，文件名区分大小写，要是实际文件叫fakedata.js但你写FakeData.js，也会触发找不到文件的错误，确保导入的文件名和实际完全一致。
• 清理开发服务器缓存：React开发服务器可能存了旧的路径缓存，停止服务器（按Ctrl+C）后重新执行npm start，说不定能解决奇怪的解析问题。

避免同类问题的技巧 #

• 写相对路径前先理清当前文件位置：同目录用./，子目录用./子文件夹/，只有访问父目录时才用../。
• 用编辑器的自动补全功能导入文件，比如VS Code里输入import { UsersData } from './后会弹出同目录文件列表，减少手动输错的概率。
• 项目内文件名统一大小写，避免跨平台开发时出现路径问题。

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