Laravel10 + vue3の環境でInertia.jsを利用する時はresolveComponentを利用する

こんにちは。エキサイト株式会社の奥川です。 本記事ではvue+laravelの環境にInertia.jsを導入する時に発生したエラーの解決方法について紹介します。

環境

Laravel: 10.38.1

Vue: 3.3.13

発生したエラー

Inertiaのドキュメント通りに進め、app.jsに次のように記載しました。ディレクトリ構成の都合上、パスを変更しています。

inertiajs.com

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: (name) => {
    const pages = import.meta.glob('./components/**/*.vue', { eager: true })
    return pages[`./components/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

ここで、下記のようなエラーが発生しました。

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'default')

解決方法

調べてみると、laravelのドキュメントとInertiaのドキュメントに差異があることが分かりました。laravelのドキュメントのようにresolvePageComponentを利用するとエラーが発生しなくなりました。

laravel.com

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

createInertiaApp({
  // Inertia.jsのドキュメントの書き方
  // resolve: (name) => {
  //   const pages = import.meta.glob('./components/**/*.vue', { eager: true })
  //   return pages[`./components/${name}.vue`]
  // },

  // Laravelのドキュメントの書き方
  resolve: (name) => resolvePageComponent(
      `/resources/js/${name}.vue`,
      import.meta.glob('/resources/js/components/**/*.vue')
  ),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})