概要

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です。