在 VS 代码中：[ts] 找不到模块 '@src/xxx'

Posted 2023-03-13

【中文标题】在 VS 代码中：[ts] 找不到模块 \'@src/xxx\'

【英文标题】：In VS Code: [ts] Cannot find module '@src/xxx'在 VS 代码中：[ts] 找不到模块 '@src/xxx'

【发布时间】：2018-12-21 12:13:54

【问题描述】：

所以，我正在使用这个tsconfig.json：

  "compilerOptions": 
    "baseUrl": ".",
    "declaration": true,
    "module": "ES6",
    "moduleResolution": "node",
    "outDir": "./lib/",
    "paths": 
      "@src/*": ["src/*"]
    ,
    "preserveConstEnums": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "ES6"
  ,
  "include": [
    "global.d.ts",
    "src/**/*.ts"
  ]

在哪里可以看到别名 @src 是为我的代码定义的。

tsc/webpack 构建所有内容都没有问题，但是在 VS Code 中编辑时，当我将某些内容导入为时，我无法摆脱此错误消息

import  xxx  from '@src/xxx';

有同样问题的人吗？对我来说，看到这个很奇怪，因为如果它正确编译/构建（来自 tsc 和 webpack），这意味着配置是正确的。那么为什么 VS Code 会显示这个错误信息呢？这很烦人，但我想解决它。

tsconfig.json 文件也使用标准名称（tsc 没有自定义 -p 选项）所以，VS Code 应该能够自动读取它，对吧？还是需要对 IDE 进行任何额外的配置？

【问题讨论】：

你搞清楚了吗？我也遇到了同样的问题。

遗憾的是没有。我现在不使用别名:(

感谢您的回复。我想知道他们是否修复了 VS Code？我发现我需要在 typescript 中定义 *.gif。之后它对我来说很好。有别名。我的另一个问题有我的完整配置和我的解决方案，以防它帮助你：***.com/questions/54880363/…

【参考方案1】：

我有同样的问题。在我运行 Cmd+Shift+P > Typescript: Restart TS Server 的情况下，技巧和错误消息消失了

【讨论】：

哦，对不起，这并没有解决它...但是自从我上次修复它以来，让我发布对我有用的答案:)

当您在深层嵌套文件结构中创建新文件并在其上使用 typescript 别名时，会出现此问题。谢谢，不是最好的解决方案，但它有效）

天啊...我只花了 3 个小时在这上面，直到你救了我。

【参考方案2】：

很久之后（我已经忘记了这个问题......）我让它工作了（不知道当原始问题发布时是否可能）。

我会在这里写下我所做的，以防它可以帮助其他人:)

基本上，我需要以下内容：

1。在tsconfig.json 中定义路径

这是在原始问题中，但也包括在此处以完成：

  "compilerOptions": 
    "baseUrl": ".",
    "paths": 
      "@src": ["src"],
      "@src/*": ["src/*"],
    

2。安装tsconfig-paths

npm i -D tsconfig-paths

如果您正在使用 webpack，请添加 tsconfig-paths-webpack-plugin 并将插件添加到您的 webpack.config.js 中，如下所示：

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = 
  // ...
  resolve: 
    extensions: ['.ts', '.tsx', '.js', '.json'],
    plugins: [new TsconfigPathsPlugin( configFile: 'tsconfig.json' )],
  ,
;

如果您使用的是 NextJS，插件的配置在next.config.js 中如下所示：

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = 
  webpack: (config) => 
    config.resolve.plugins.push(
      new TsconfigPathsPlugin( configFile: 'tsconfig.json' )
    );

    return config;
  ,
;

---

我不确定是否只是改进了 VS Code（因此我的问题在我发布问题后的一年半内自动修复），但这是我现在使用的并且是工作正常。希望对其他人也有帮助:)

【讨论】：

在我的情况下不起作用，安装了软件包，但是在运行我的 nextjs 应用程序时它说“找不到模块 'tsconfig-paths-webpack-plugin'”.. 我错过了什么？跨度>

你也必须安装它：npm install --save-dev tsconfig-paths-webpack-plugin

【参考方案3】：

现在应该开箱即用。顺便说一句，确保 jsconfig/tsconfig 中的包含指向正确的路径，即

// example:
"include": [
  "./**/*.ts",
  "./**/*.tsx"
],

【讨论】：

是的，3 年多来情况发生了很大变化；）