Zenn
🔖

Nuxt Bridge にアップグレードする際にハマった所をメモしていくだけの記事

2023/03/07に公開
Nuxt
Vue.js
Nuxt Bridge
tech

重い腰を上げて社内で使ってるダッシュボードを Nuxt Bridge にアップグレードしようとしたら、思いの外ハマったのでメモを残す

nuxi prepare や nuxi dev を実行する際のエラーは指示通りに対応それほど苦労しなかった。
問題はその後、ビルドが通るようになって開発サーバーが立ち上がってから。

画面が真っ白で動かない その 1 / Uncaught TypeError 問題

画面が真っ白で何も動かない

 Uncaught TypeError: Cannot destructure property '__extends' of '_tslib_js__WEBPACK_IMPORTED_MODULE_0___default.a' as it is undefined.

ブラウザ側のコンソールには下記のようなエラーが出ていたので下記記事にたどり着き無事解決 🙏

Nuxt Bridge 導入してみた ④ ないモジュールはインストールの巻
元記事Solved — Rxjs TypeError: Cannot destructure property ‘__extends’ of tslib.js

 export default defineNuxtConfig({
 // ..略..
 　alias: {
 　tslib: 'tslib/tslib.es6.js',
 　},
 // ..略..

画面が真っ白で動かない その 2 / router.base 問題

引き続き画面が真っ白のまま何も動かない。

吐き出されたソースを確認すると、 /dashboard/dashboard のように router.base に指定していたパラメーターがダブって表示されていた。

app.baseURL が代替となるパラメーターらしいが、そのまま変えても一部の <script> を読み込むパスは app.baseURL パラメーターを読み込まず、パスの階層が違う問題が残っていたままだったので、 Github のコメントのワークアラウンドで回避。
本当は app.baseURL で期待どおり動くようになってほしいけど NuxtBridge 側のソース読む体力が無かったので OSS 活動は諦めた。

import { defineNuxtConfig } from "@nuxt/bridge";

export default defineNuxtConfig({
  // ...
  app: {
    buildAssetsDir: "/_nuxt",
    baseURL: "/dashboard",
  },
  router: {
    base: "/dashboard",
  }, // ...
});

具体的には router.base は引き続き残し、 app.baseAssetDir に /_nuxt, app.baseURL に router.base と同じ値を指定する。

他に参考にさせていただいたサイト

nuxt.config.ts への移行は一旦しない

ドキュメント上は nuxt.config.js -> nuxt.config.ts へ移行することが推奨になっているが、おそらく Nuxt3 用の型定義しかサポートできておらず、ほとんどのパラメーターが上手く読み込まれなかったので断念した。
一応 Nuxt2Config みたいな型の存在は確認したが、Nuxt2 でサポートしていたオプションは無かった。

一旦 .js のままでも動作する状態まで持っていけたので、ネクストアクションで config を Nuxt3 向けに書き直す必要がありそう。

終わりに

Composition API への移行も残り 10~20% ぐらいなものの、 <script setup> 記法にも書き換えなきゃなーとか、上述の通り nuxt.config.ts に書き換えないとなーとか色々宿題はある感じだけど、一旦ここまでのエラー潰せばこれまで通りの動きは確認できたので一安心。

/以上

GitHubで編集を提案

Discussion