概要
Vue.js
を扱ったプログラムをAWScodepipelineで自動デプロイしたら、ビルドステージでDid you mean to enable the 'allowJs' option?
というエラーが表示されて失敗していました。
本記事では本エラーの解決方法を記します。
エラー内容
CodeBuildのエラーログは以下の通り。
error TS6504: File '/codebuild/output/src1493754208/src/xxx/app/src/views/Sample.vue.js' is a JavaScript file. Did you mean to enable the 'allowJs' option?
The file is in the program because:
Matched by include pattern 'src/**/*' in 'tsconfig.app.json'
ERROR: "type-check" exited with 2.
エラーメッセージの内容を見ると、Sample.vue.js
というファイルがJavaScriptファイルであることが示されており、TypeScriptファイルとして処理するためにallowJs
オプションを有効にするかどうかが聞かれています。
tsconfig.app.json
は以下の通り。
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"composite": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
ちなみに、Codebuildステージで「失敗しました」と赤字で表示されていたのですが、アプリケーションを確認するとマージ分は反映されているようでした。つまり、ビルド自体は成功しているが、TypeScriptのコンパイルエラーが発生しているためにtype-checkプロセス
が終了し、AWS CodeBuildのビルドプロセスはエラーとして報告されているよう。
原因
エラーメッセージの中にあるallowJs
オプションとは、JavaScriptファイルをTypeScriptプロジェクト内で許可するかどうかを制御するためのオプション。このオプションはデフォルトではfalse
になっています。つまり、JavaScriptファイルはTypeScriptプロジェクト内で扱われることはない状態でした。これが問題となっていたようです。
解決方法
解決策は二つあります。
①Sample.vue.js
をTypeScriptファイルとして扱うようにする = 拡張子を.ts
に変更する
②Sample.vue.js
をJavaScriptファイルとして扱うようにする = "allowJs": true
という設定を追加する
今回は②で対応しました。
結果、以下に変更すると、CodeBuildが正常に完了しました。
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"allowJs": true,
"composite": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
補足:tsconfig.app.json
とは
tsconfig.app.json
は、Vue.jsアプリケーションなどのTypeScriptプロジェクトに関連する設定を格納するファイル。
Vue.jsアプリケーションは、通常、
・TypeScriptで書かれたファイル(.ts
拡張子)
・Vueファイル(.vue
拡張子)
で構成されています。Vueファイルにはテンプレートやスクリプトが含まれており、これをTypeScriptと統合して開発するために、適切なTypeScriptコンパイラの設定が必要です。
TypeScriptでコンパイルの設定を行うファイルがtsconfig.app.json
です。