Zenn
Open4

GAS/HtmlServiceを利用したフロントエンド開発の受難 〜Vue@3.4.0の乱〜

luthluth

前提

GASのHTML Service(doGetでhtmlファイルを返して、Webアプリを作るやつ)について

ローカルのVite + ts + Vue@3.3 + vite-plugin-singlefile の環境を1HTMLファイルにまとめ上げて、
claspを利用してアップロードし、Webアプリ開発をしている

luthluth

Vue@3.4.xで発生したバグ

defineModelマクロが使いたくて、vueをバージョンアップ
この段階でbuildしてclasp pushすると、下記エラーでマウントすらされんくなった…

Uncaught SyntaxError: Invalid destructing assignment target

関数宣言とかで、引数を分割代入にするときで、デフォルト引数を間違って行なっている時に出るエラーみたい。
自分のコードを見直したけど、特段デフォルト引数の設定方法は間違ってなさそう…

それにローカルのhtmlファイルそのものをChromeで開いても、エラー出ずに描画されるぞ…？？？？(宇宙猫)

luthluth

GASの二重ラッピングされているiframeは他にも厳しすぎる制約があることことで有名なので、まぁGAS固有なんだろうな…と開発者ツールでソースを追ってみる

すると、ローカルのファイルではこうなってたものが、

ローカルのhtmlファイル内
i = `https://vuejs.com/errors/#runtime-${n}`

GASで読み込まれた時にはこうなってた………

GASで読み込まれた後のjsファイル内
i = `https://
${T}`, message: "alert", // これ、本来はだいぶ先のコード

………GASが読み込んでiframe内で展開する時に、ソースめっちゃ削ってね？？？？

luthluth

Vue@3.3.x と、Vue@3.4.0 とで、build後のファイルで当該箇所を比較するとこんな感じで、URLが GAS側のなんかの置換処理に引っかかっちゃったんだろうなぁ…

vue@3.3.x でのbuild版
i = n;
vue@3.4.0 でのbuild版
i = `https://vuejs.com/errors/#runtime-${n}`;

てことで、build後のファイルでのここを@3.3.x系に合わせる置換処理バッチをいれて取り急ぎの対処としました