Nuxt2.9.1へのアップデートでAMPエラーが出た時に対応したこと

Nuxt2.9.1系にアップデートしました。
これまで使っていたのが、2.0.0。
だいぶ間が空いてしまいましたね😅

恐る恐るアップデートしてみると・・・想定どおりと言いますか、エラーが出ました。
ただ、思いの外Nuxt自体のエラーは少なく、PWAのプラグインの問題があったくらいです。

しかしながら、AMPのバリデーションエラーが多発するようになりました。

今回は Nuxt2.0.0から2.9.1へのアップデートで、AMPバリデーションで出現したエラーへの対応 を書いていきたいと思います。

  1. なぜNuxtのアップデートがAMPに影響したのか
  2. いきなりamp-customタグが複数になった
  3. styleタグの置き換えが失敗するようになった
  4. amp-sidebarが動かなくなった
  5. まとめ:NuxtでAMPするのは手間がかかります

なぜNuxtのアップデートがAMPに影響したのか


ご存知の通り、AMPはjavascriptの利用を厳しく制限したり、amp専用のタグにも独自のルールが課されています。
それらに対応するために、nuxtでgenerateされるHTMLを操作しているのですが、これが影響してしまったと言うわけです。

具体的には、特定の文字列を検出して、不要なスクリプトを削除したり、特定のタグのブロックごと移動したりしていました。

Nuxtのアップデートにより、generateされるHTMLの記述に変更があり、文字列の検出が思い通りにできなくなってしまっていた んですね。

いきなりamp-customタグが複数になった

ホットリロードで、インジケーターが出現するようになりました。
API: build プロパティ - Nuxt.js

かなり便利なのですが、AMPを実装した場合は、バリデーションエラーになります。
インジケータのデザインを制御するCSSを、HTMLに突っ込まれるからです。

styleのタグをスクリプトでamp-customに書き換えているので、それが複数できてしまったと言うわけ。

ただ、テスト環境ではエラーになりますが、本番環境に置かれる生成されたHTMLには影響しない ので、無視してもOKです。

僕はAMPのエラーが見つけづらくなりそうなので、対応しておきました。

対応:インジケーターを表示しない

nuxt.config.jsのビルド設定のindicatorをfalseに切り替えると、インジケーターの表示を無効にできます。

build: {
  // AMPのバリデーションえらえちゃうので、インジケーター表示をしない
  indicator: false,
  // 以下略〜
},

デフォルトでは、trueになっています。

styleタグの置き換えが失敗するようになった


自動でsytleタグ内にインラインで吐き出されるスタイル。
こんなコードでタグそのものを置き換えてました。

html = html.replace(/<style data-vue-ssr/g, '<style amp-custom')

しかし、微妙にdata-vue-ssrのあたりの処理が変わったようです。

こんなエラーを吐いてました。
The attribute 'amp-custom-id' may not appear in tag 'style amp-custom'.

書き換わった後のタグに、残された-idがくっついちゃってた模様。
結局、丸ごと変更することで対応しました。

html = html.replace(/<style/g, '<style amp-custom ')

amp-sidebarが動かなくなった


サイドメニューを開こうとしたら、動かない・・・。
そして、こんなエラーが出現してました。
Target "sidebar" not found for action [tap:sidebar.open].

ソースを見てみたら、amp-sidebarがタグごと消失。
おそらく、生成されたHTMLの記述そのものが変わったのだと思われます。

amp-sidebarブロックは、body直下に置くという仕様

amp-sidebarがbody直下じゃないと動かない。
移動すればいいじゃんって話なんですが、nuxtが生成するブロックでラップされてしまうので難しいのです。
こんな感じ。

div id="_nuxt"
  div id="layout"
    <!-- 以下にコンポーネントとかが入る -->

なので、生成されたHTMLからamp-sidebarのコードを無理やり、bodyの下に置きなおすと言う処理を施していました。
今回の問題は、置きなおす処理がおかしくなっているのが原因でした。

置きなおす処理をやめて対応完了

試しに、処理そのものを外してみました。

そうすると、AMPのバリデーションエラーも消えてました。
あれ?なんでだろ。

<amp-sidebar>は、<body>の直接の子である必要があります。

Documentation: amp-sidebar - amp.dev

一応ドキュメントでは、このように書いてあります。
しかし、今のところ、AMPのバリデーションのエラーにはならないようです。

良いのかどうかが謎ですが、今回はそのまま放置しておきます😓

まとめ:NuxtでAMPするのは手間がかかります


NuxtとAMPの組み合わせは、相性が良いとは言えないですね。

今後、NuxtでAMPを考えているのであれば、ReactのNext.jsを検討してみても良いかもしれません。

ReactのNext.jsであれば、AMP用のチュートリアルが用意されていています。
Learn - Create AMP Pages | Next.js

しかし、面倒なことが悪いこととは限りませんね。
僕にとっては、成長する課題を与えられているようで、辛さだけではなく楽しくも感じています。

Social Share
#nuxt
#amp
ChaosBoy

テーマは「脱・思考停止」。
コメントはtwitterでお気軽に。