Nuxt3をSPAでビルド+ホスティングするとランタイムエラーになった

SPAでビルドしたいのでnpm run generate + 以下の構成でビルド

export default defineNuxtConfig({
  ssr: false,
})

hanzzoo

特定のホスティング環境にデプロイすると、ランタイムエラー

Uncaught TypeError: Cannot read properties of undefined (reading 'baseURL')
    at vm (BjXm_d0o.js:19:24899)
    at BjXm_d0o.js:19:25154

hanzzoo

デバッグしてみると、nuxt.config.ts の構成ファイルあたりの処理で Nuxtを初期化するインスタンスが undefined で baseURL にアクセスしようとしてアプリが壊れている

ビルドされたindex.htmlのscriptには nuxt.config.ts のデフォルトの値が設定されているが、ランタイムで window.__NUXT__ にアクセスすると undefined になる。

<!-- 略 -->
<script>window.__NUXT__={};window.__NUXT__.config={public:{baseURL:""},app:{baseURL:"/",buildId:"03ab22ec-2d7c-45a0-b756-ba1bc280004c",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>

どうやら、この window.__NUXT__ にアクセス = 例外処理でランタイムエラーが発生する様子

hanzzoo

特定のホスティング環境だけではなく、同じ構成でデプロイできそうか、github pages で試してみる

hanzzoo

https://hanzzoo.github.io/test3/
いけた。window.__NUXT__ にもアクセスできる

__NUXT__
Proxy(Object) {data: Proxy(Object), state: Proxy(Object), once: Set(0), _errors: Proxy(Object), config: {…}, …}

hanzzoo

ということは、ホスティング環境特有の問題
JavaScriptの読み込みをブロックしてそうな http headerの指定がされていないか確認

hanzzoo

content-security-policy:
default-src 'self';script-src 'self' 'nonce-0815acb620885a5cdcacefc56dcee4b9' 'unsafe-hashes' 'unsafe-eval' ;script-src-elem 'self' 'nonce-0815acb620885a5cdcacefc56dcee4b9' 'unsafe-eval' ;style-src 'self' 'unsafe-inline' *;font-src 'self' 'unsafe-inline' data: blob: *;img-src 'self' 'unsafe-inline' data: blob: *;connect-src *;object-src 'none';base-uri 'self'

content-security-policy の制約が厳しくてHTML上にインラインに書かれている windowオブジェクトが読み込めないせいでSPAがクラッシュしていた

hanzzoo

content-security-policy の指定をセキュアに保ちつつ上手い具合に設定するか、window.__NUXT__ をインラインで読めるようにできないか

いずれにしても、全く手掛かりがなかったので原因が分かっただけ良かった

このスクラップは2025/01/17にクローズされました