React+TypeScript项目中import路径无法识别的问题求助

问题场景 #

环境：Mac系统 + VSCode编辑器，技术栈React、TypeScript、Node.js
报错信息：

Module not found: Error: Can't resolve '../src/router' in '/Users/sample/test/js_taskList/frontend/src'

目录结构：

root
  └── frontend
       └── src
            ├── router.ts
            └── App.tsx

App.tsx导入代码：

import React, { useEffect, useState } from 'react';
import './App.css';
import { fetchData, addData, deleteData, toggleData } from './router';

排查建议 #

• 校验文件名大小写：Mac默认文件系统不区分大小写，但TypeScript、打包工具（Webpack/Vite）会严格校验文件名。确认router.ts实际文件名没有大小写偏差（比如Router.ts、ROUTER.ts）
• 清理缓存并重启：
  • 在VSCode中按Cmd+Shift+P，输入Reload Window重启编辑器，清除UI缓存
  • 终端执行以下命令清理Node依赖和打包缓存：

    rm -rf node_modules
    rm package-lock.json # 或 yarn.lock
    npm install
    # 若用Vite，额外执行：rm -rf node_modules/.vite
    # 若用Create React App，额外执行：npm run clean
    

• 检查TypeScript配置：打开tsconfig.json，确认：
  • baseUrl未错误配置（比如设为上级目录导致相对路径解析异常）
  • include数组包含src/**/*，确保TS能识别src下的所有文件
• 检查打包工具配置：
  • 若使用Create React App，确认未自定义修改webpack配置导致路径解析规则冲突
  • 若使用Vite，检查vite.config.ts中的resolve.alias是否有覆盖默认路径解析的配置
• 终端验证文件存在性：执行ls /Users/sample/test/js_taskList/frontend/src，确认输出中确实包含router.ts，排除VSCode文件树缓存显示错误
• 尝试显式添加文件后缀：修改导入语句为import { ... } from './router.ts'，部分配置场景下需要显式指定后缀才能正确解析

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