inertia icon indicating copy to clipboard operation
inertia copied to clipboard

Published 20 hours ago • verified publisher icon inertiajs

Error: this.$slots.default is not a function

Open deinte opened this issue 1 year ago • 0 comments

Version:

  • @inertiajs/vue3 version: 1.0.14

Describe the problem:

I'm migrating a project from vue2 to vue3 using and will be using a transition period with the vue/compat package. While updating and checking pages an error I'm getting a lot is:

head.ts:97 Uncaught (in promise) TypeError: this.$slots.default is not a function
    at Proxy.render (head.ts:97:77)
    at Proxy.compatRender (vue.runtime.esm-bundler.js:5068:27)
    at renderComponentRoot (vue.runtime.esm-bundler.js:2958:44)
    at ReactiveEffect.componentUpdateFn [as fn] (vue.runtime.esm-bundler.js:8870:57)
    at ReactiveEffect.run (vue.runtime.esm-bundler.js:534:25)
    at instance.update (vue.runtime.esm-bundler.js:8996:56)
    at setupRenderEffect (vue.runtime.esm-bundler.js:9010:9)
    at mountComponent (vue.runtime.esm-bundler.js:8777:9)
    at processComponent (vue.runtime.esm-bundler.js:8731:17)
    at patch (vue.runtime.esm-bundler.js:8333:21)

The cause of this error is including the meta title like this:

      <Head>
          <title>Home</title>
      </Head>

I'm not receiving errors when using this notation:

<Head title="Home">

I've tried using the title in the first syntax in a brand new laravel / vue3 / inertia project and I'm receiving the same errors. I also did check the documentation and it does still say that it should be possible:

<Head>
  <title>Your page title</title>
  <meta name="description" content="Your page description">
</Head>

Steps to reproduce:

  • Installing a new laravel project
  • Installing vue3 with inertia
  • Using this notation:
<Head>
  <title>Your page title</title>
  <meta name="description" content="Your page description">
</Head>

deinte avatar Nov 13 '23 18:11 deinte