ウェブサイト検索

typescript - tsc がローカルファイルに対して `TS2307: モジュールを見つけることができません` を投げる

TypeScriptを使った簡単なサンプルプロジェクトがあります: https://github.com/unindented/ts-webpack-example

バージョン 1.8.10 の tsc を使用して tsc -p . を実行すると、次のようになります:

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"
  ]
}

面白いことに、ts-loaderを使用してwebpackでプロジェクトをビルドすると問題なく動くので、単に設定の問題だと思います…

回答 #1

@vladima が GitHub でこの問題に返信しました：

コンパイラーがモジュールを解決する方法は、node または classic のいずれかである moduleResolution オプションによって制御されます（詳細および違いはここで確認できます）。この設定を省略した場合、モジュールが commonjs の場合はコンパイラーはこの設定を node とみなし、それ以外の場合は classic とみなします。あなたの場合、commonjs モジュールで classic モジュール解決戦略を使用したい場合は、明示的に設定する必要があります。

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

回答 #2

場合によっては、include 配列を更新するだけで済むことがあります。

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

回答 #3

私の問題は異なる環境でのビルドでした。私のOSXビルドでは問題はありませんでした。しかし、Linux環境でビルドしようとすると失敗しました。その原因はオペレーティングシステムの大文字と小文字の区別でした。この問題に悩んでいる人は、インポートの大文字小文字も確認してください。

ファイル構造は次の通りでした:

/X/Y.ts

私の輸入は次の通りでした:

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

だから、私の修正は単に「x」を大文字にしただけでした。

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

関連記事