[Laravel Mix] 型定義ファイル(.d.ts)を作ったら”TypeScript emitted no output”エラーになる

Laravel ロゴ

環境

Laravel-mix 6
Vue 2.7

型定義ファイルがないモジュールがあったので、@typeフォルダを作って型定義ファイルを入れてビルドしてみたが・・・

Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for 型定義ファイル

こういうエラーになる

結論

@type フォルダをTSのコンパイル対象外のフォルダに移動したらうまくいった。

詳細を追記
もっと詳細に書くと、webpack側では型定義ファイルはトランスコンパイルに必要ないので、対象外にする必要がありました。
前提として、フォルダ構成は以下のように配置しています。
ts/vueファイルはresources/js フォルダに
*.d.ts ファイルは resources/@types フォルダーに配置しました。
トランスコンパイルしたJSファイルはpublic/js/vue に配置されます。

{
    "compilerOptions": {
    // 関連するところのみ抜粋
    "typeRoots": ["resources/@types", "node_modules/@types"]
},
    "include": [ "resources/*" ]
}

webpack(Laravel-mix)側の記載

// 関連するところのみ抜粋
mix.ts('resources/js/**/*.ts', 'public/js/vue')
.vue()

このようにすることで、LinterからはみれるけどWebpackから見たら対象外になります。

結論までの経緯

エラー文で検索してみると、tsconfig.json のcompilerOptions.noEmit:true のオプションをfalseにしろとか設定を消せとあるが、それはすでにやっている。
さらに調べてみると、webpack.min.js の方でも同じ設定をする必要があるとかないとかという書き込みがあったが、設定方法が間違っているのか効果がなかった。
もう一つの方法として、型定義ファイルをコンパイルから除外すればいい(noEmitのオプションも同じ意味っぽい)ということがわかったが、laravel mixやwebpackで特定のフォルダをコンパイルから除外する書き方がわからなかったので、@type フォルダをTSのコンパイル対象外のフォルダに移動したらうまくいった。
型定義ファイルはエディタ上でのナローイングとかLintに必要なだけで、jsに変換する時は特に関係ないのでなくてもいいのだろう。

Laravel Mixのコンパイルオプションが何か変なのだと思うがよくわからん。

もっといい方法があったら教えて欲しい。そのうちWebpackからViteに移行するだろうしとりあえずこれでいいか。

タイトルとURLをコピーしました