Vue3のテンプレートのコンパイラは、デフォルトでES2020の構文をサポートしています。
にも関わらず、テンプレート内でOptional chaining
(?.
)やnullish coalescing
(??
)を使うと、
vue-loader
は以下のメッセージを出力し、コンパイルに失敗します。
You may need an additional loader to handle the result of these loaders.
これはvue-cli
などで環境を作成した場合は発生しないので、大抵の人は起きない問題です。
原因:
さんざんvue-loader
やbabel
などを調べましたが、結果としてはこちらの記事を読んでWebpack
の問題だと分かりました。
Webpack では JavaScript の新構文を変換なしでバンドルできない
対応:
Webpack5系にアップデートすることで解決しました。
しかし、vue-cli
で作成した環境では、Webpack4系だったので、恐らくWebpackがバンドルをする前に変換して対処しているのかなと想像します。