Nuxt.js + Firebaseで「Cannot call a class as a function」エラー

Question

フロントエンド初心者です。
以下のサイトを参考に進めていましたが、どうしても途中で詰まってしまい２週間以上止まっているので、どなたかご教示いただけませんでしょうか。

Nuxt.js + FirebaseでOGPの仕組みを完全に理解した　〜俳句をSVGで描画するサービスをリリースした話〜
https://qiita.com/mitsudaman/items/1956b94dc8faf8fb8c59

「Firebase Storageに画像をアップ」の「このスニペットに置き換えて、ローカルより「つくる」ボタンを押してStorageにアップできていればOKです！」のところで、「Cannot call a class as a function」エラーが発生します。

コンソールを確認すると、inde.vueの73行目「canvg(canvas, data);」でエラーが発生しているようですが、こちらを解決できません。

何度も一からやり直していますが、一向にヒントがつかめません。
ソースはGitのものをほぼコピーで作っています。

Answer 1

https://www.npmjs.com/package/canvg

現在、canvgの最新版は3.0.5のようです
（最近 yarn add canvg でインストールしたのなら3系が入っているかと思います。package-lock.json か yarn.lock を見ればインストールしたバージョンが確認できます）

一方で参考にされているQiitaの記事では、1.5.3が使われているようです。
https://github.com/mitsudaman/OGPMaker/blob/da1da494bfd27547a022b6b36e3a969b7478ec4d/front/yarn.lock#L1969-L1970

1.5.3 から 3.0.5 までの間に破壊的な変更　(具体的には、おそらくexportされるものが関数からクラスに変わった？)があったはずです。
https://github.com/canvg/canvg/releases
詳細はリリースノートを追えばわかるはずですが、

一旦動けばいいのであれば、
yarn add canvg@1.5.3 などで、1.5.3を指定してインストールすると解決するかもしれません。

Comments

[fightman]

無事動きました！！！！
ありがとうございました！！！！！！！！

yarn.lock を確認しましたところ、
canvg@^3.0.5: version "3.0.5"
でしたので、
yarn add canvg@1.5.3
でバージョンを指定したところ解決しました。

rnittaさんありがとうございました！