Nuxt.js

【Nuxt.js】「babel-preset-vca-jsx」利用時に「Object(...) is not a function」エラー

2020/07/05

最近、Nuxt.jsでComposition-apiを試し始めています。

Composition-api周りの記事を読んでいると、「babel-preset-vca-jsx」というライブラリを併用することで、簡単にTSX（JSX）も利用できるとのこと。

早速試してみたのですが、「Object(…) is not a function」というエラーが発生し、TSXで記述したコンポーネントが読み込めないという状況に遭遇してしまいました。

エラーの原因：「@vue/composition-api」とのバージョン不整合

原因は単純で、「@vue/composition-api」の最新バージョンに、「babel-preset-vca-jsx」が対応していないことでした。

エラー遭遇時、それぞれのバージョンは以下だったのですが、

「@vue/composition-api:1.0.0-beta.1」で、破壊的な変更が入っていたみたいですね。

詳細は以下のPRに記載されています。

今回は、「@vue/composition-api」のバージョンを「0.6.7」に下げることで解決できました。

もうPRが上がっているので、バージョン対応もすぐだとは思います。応急処置として参考になれば嬉しいです。