TS2307错误：Webpack+TypeScript项目无法解析@/*自定义路径求助

• Webpack未配置对应路径别名：TypeScript的tsconfig.json中paths仅为编译器提供路径提示，Webpack本身不会自动识别该配置。需要在Webpack配置文件的resolve.alias中添加对应配置：

  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
  

• VS Code TypeScript语言服务缓存问题：编辑器的TS服务可能缓存了旧配置，导致路径解析异常。可以通过以下操作重置：

  • 打开命令面板（Ctrl+Shift+P / Cmd+Shift+P）
  • 执行TypeScript: Restart TS Server命令
  • 或者直接重启VS Code

• 存在多个TS配置文件冲突：项目中如果有多个tsconfig*.json文件（如tsconfig.app.json、子目录下的tsconfig.json），TypeScript可能加载了错误的配置文件，导致paths未生效。检查项目根目录是否有优先级更高的TS配置，或者确保编辑器使用的是根目录的tsconfig.json。

• Babel未配置路径别名解析：由于你使用了@babel/plugin-transform-typescript，Babel在处理TS文件时需要单独配置路径别名。需安装babel-plugin-module-resolver并在Babel配置文件（.babelrc或babel.config.js）中添加：

  {
    "plugins": [
      ["module-resolver", {
        "root": ["./"],
        "alias": {
          "@": "./src"
        }
      }]
    ]
  }
  

• Webpack的resolve.extensions配置缺失：如果导入路径未写扩展名（如import xxx from '@/utils'），Webpack需要知道要解析哪些扩展名。确保resolve.extensions包含项目中使用的文件类型：

  resolve: {
    extensions: ['.ts', '.tsx', '.vue', '.js', '.json']
  }
  

• 全局TypeScript版本与项目本地版本冲突：如果全局安装的TS版本和项目node_modules中的版本不一致，可能导致解析行为差异。执行npx tsc --version查看项目本地TS版本，确保编辑器使用的是本地版本（VS Code中可通过右下角TS版本切换）。

• tsconfig.json中的语法错误：你的tsconfig.json中lib数组最后一项有多余的逗号：

  "lib": [
    "esnext",
    "dom",
    "dom.iterable",
    "scripthost",
    "es2016", // 这里的逗号需要删除
  ]
  

  虽然多数情况下TS会忽略，但部分解析器可能因此报错，导致整个配置未被正确加载。

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