tsc抛出`TS2307:无法找到本地文件的模块`

Question

我有一个使用TypeScript的简单示例项目:https://github.com/unindented/ts-webpack-example

运行tsc -p .(tsc版本1.8.10)会引发以下情况:

app/index.ts(1,21): error TS2307: Cannot find module 'components/counter'.
components/button/index.ts(2,22): error TS2307: Cannot find module 'shared/backbone_base_view'.
components/button/index.ts(3,25): error TS2307: Cannot find module 'shared/backbone_with_default_render'.
components/counter/index.ts(2,22): error TS2307: Cannot find module 'shared/backbone_base_view'.
components/counter/index.ts(3,25): error TS2307: Cannot find module 'shared/backbone_with_default_render'.
components/counter/index.ts(4,27): error TS2307: Cannot find module 'shared/backbone_with_subviews'.
components/counter/index.ts(5,20): error TS2307: Cannot find module 'components/button'.

它抱怨所有本地文件的导入,如下所示:

import Counter from 'components/counter';

如果我将它改为相对路径它可以工作,但我不想,因为它使我的生活更加困难时移动文件:

import Counter from '../components/counter';

该vscode代码库不使用相对路径,但一切工作正常他们,所以我必须失去在我的项目的东西:https://github.com/Microsoft/vscode/blob/0e81224179fbb8f6fda18ca7362d8500a263cfef/src/vs/languages/typescript/common /typescript.ts#L7-L14

你可以看看我的GitHub仓库,但万一它有帮助这里是tsconfig.json我正在使用的文件:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noImplicitAny": false,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "outDir": "dist"
  },
  "exclude": [
    "dist",
    "node_modules"
  ]
}

有趣的是,通过webpack使用ts-loader正常工作来构建项目,所以我猜它只是一个配置问题......

Answer 1

@vladima 在GitHub上回复了这个问题:

编译器解析模块的方式由moduleResolution选项控制,该选项可以是node或者classic(可以在此处找到更多详细信息和差异).如果此设置被忽略,编译器将是这个设置node,如果模块commonjs和 classic-否则.在您的情况下,如果您希望classic模块解析策略与commonjs模块一起使用- 您需要使用明确设置它

{
    "compilerOptions": {
        "moduleResolution": "node"
    }
}

Answer 2

我的问题是在不同的环境中构建。在我的 OSX 版本中没有任何问题。但是当我尝试在Linux环境上构建时，却失败了。其背后的原因是操作系统的区分大小写。遇到此问题的任何人还请检查导入中的大小写敏感性。

文件结构为：

/X/Y.ts

我的进口是：

import Y from "./x/Y.ts";

所以，我的解决办法就是将“x”设为大写。

import Y from "./X/Y.ts";

Answer 3

在某些情况下，您只需要更新include数组。

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "sourceMap": false,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "tests/**/*.ts"],
  "exclude": ["node_modules", ".vscode"]
}

Answer 4

在 VS2019 中，项目属性页，TypeScript Build选项卡有一个“模块系统”的设置（下拉）。当我将其从 "ES2015" 更改为CommonJS 时，VS2019 IDE 不再抱怨它既找不到 axios 也找不到 redux-thunk (TS2307)。

tsconfig.json：

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": "src",
    "forceConsistentCasingInFileNames": true,
    "jsx": "react",
    "lib": [
      "es6",
      "dom",
      "es2015.promise"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "outDir": "build/dist",
    "rootDir": "src",
    "sourceMap": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "target": "es5",
    "skipLibCheck": true,
    "strict": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "exclude": [
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "node_modules",
    "obj",
    "**/*.spec.ts"
  ],
  "include": [
    "src",
    "src/**/*.ts",
    "@types/**/*.d.ts",
    "node_modules/axios",
    "node_modules/redux-thunk"
  ]
}

Answer 5

vscode 代码库不使用相对路径，但对它们来说一切正常

真的取决于你的模块加载器。如果您使用systemjswithbaseurl那么它会起作用。VSCode 使用自己的自定义模块加载器（基于旧版本的 requirejs）。

推荐

使用相对路径，因为这是commonjs支持的。如果你四处移动文件，你会得到一个打字稿编译时错误（一件好事），所以你会比那里的绝大多数纯 js 项目（在 npm 上）更好。

Answer 6

我也遇到这个错误。但 VSCode 和 GitHub 的行为非常奇怪。我将文件从page.ts重命名为Page.ts并将更改推送到远程分支。我的本地系统上一切顺利。但我的构建在 GitHub Actions 上失败，并显示消息：Page未找到该模块。

一段时间后，我意识到这些文件在远程分支上没有被重命名（但存在任何进一步的更改）。我再次通过 GitHub Web UI 重命名它们，并且我的构建运行成功。

因此，如果您的 CI/CD 构建因 TS2307 失败，请在远程分支上进行检查。