0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Vue.js x AWS】CodeBuildのエラー「Did you mean to enable the 'allowJs' option?」の原因と解決方法

Posted at

概要

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

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?