5
5

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 3 years have passed since last update.

Vue3のテンプレート内でES2020構文が使えない原因

Posted at

Vue3のテンプレートのコンパイラは、デフォルトでES2020の構文をサポートしています。

にも関わらず、テンプレート内でOptional chaining?.)やnullish coalescing??)を使うと、
vue-loaderは以下のメッセージを出力し、コンパイルに失敗します。

You may need an additional loader to handle the result of these loaders.

これはvue-cliなどで環境を作成した場合は発生しないので、大抵の人は起きない問題です。

原因:

さんざんvue-loaderbabelなどを調べましたが、結果としてはこちらの記事を読んでWebpackの問題だと分かりました。

Webpack では JavaScript の新構文を変換なしでバンドルできない

対応:

Webpack5系にアップデートすることで解決しました。

しかし、vue-cliで作成した環境では、Webpack4系だったので、恐らくWebpackがバンドルをする前に変換して対処しているのかなと想像します。

5
5
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
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?