NodeJS根文件未找到、依赖路径异常问题排查求助

所有报错的核心根因是VS工作区错误识别了TypeScript编译范围，同时npm依赖存在路径映射偏差，两类问题叠加导致了跨前后端的连锁报错，按以下步骤操作即可全量修复：

第一步：修复VS的TS误识别报错 #

• 分别进入服务端、客户端的项目根目录，检查是否存在自动生成的tsconfig.json/jsconfig.json文件，如果存在直接删除。
• 打开VS的工作区设置，搜索typescript.disableAutomaticTypeAcquisition，将选项勾选为启用，关闭VS对非TS项目的自动类型文件拉取、自动编译逻辑。
• 清理VS的工作区缓存：关闭VS后，删除项目根目录下的.vs隐藏文件夹，重新打开项目即可消除file not found、自动生成ts文件异常的报错。客户端node_modules显示红色减号的标识也会同步消失，该标识是VS误将node_modules纳入TS编译范围、校验不通过导致的标记。

第二步：修复ansi_html路径报错 #

• 进入客户端根目录，删除node_modules文件夹与package-lock.json文件，执行命令：

  npm install ansi-html-community --save-dev
  

• 检查项目使用的构建工具配置，对应添加路径映射：
  • 如果使用手动配置的webpack，在webpack.config.js的resolve.alias配置项中添加映射：

    resolve: {
      alias: {
        'ansi-html': 'ansi-html-community'
      }
    }
    

  • 如果使用react-scripts（即create-react-app创建的项目），不需要手动修改webpack配置，直接在项目根目录执行：

    npm install @pmmmwh/react-refresh-webpack-plugin@latest --save-dev
    

    新版本的热更新插件已经修复了旧版硬编码ansi-html路径的问题。
• 重新执行npm install安装全量依赖后启动项目，Chrome侧的文件找不到报错即可消除。

补充说明 #

• 安装axios时弹出的依赖漏洞提示为npm生态的常见提示，是依赖包的上游版本问题，不影响当前项目功能开发，后续课程中如果涉及上线部署再执行npm audit fix修复即可，不需要在当前阶段处理。
• 多次重建项目仍复现问题的原因是VS会在打开项目时自动生成TS相关配置、旧的工作区缓存没有被清理，和项目本身代码无关。

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