TypeError: Cannot read property 'call' of undefined on shared data about inertia-laravel

[njoguamos]

@lucaros97 thank you for sharing. Just a llitle more.

Are you using Code splitting and dynamic imports in your project. e.g

resolveComponent: name => import(`./Pages/${name}`).then(module => module.default), 

I believe your problem could be solved by removing all styles from your components e.g remove

<style lang="scss">
  .z-100 {
    z-index: 100 !important;
  }  
</style>

[lucaros97]

Not using code splitting.

I'll try to remove all styles from the component and see if it happen again.
It's very strange also because doesn't happen every time, but only sometimes and seems to be like random 🤔

Thank you for your help @njoguamos

[Juhlinus]

@vanderb using styles in your vue components does not work properly because of an issue with Laravel Mix.

[sebastiandedeyne]

This problem often occurs when your browser has assets cached, but there's a new webpack build.

• Do you have asset versioning set up?
• Does this happen if you disable your browser cache?

[Juhlinus]

what's the solution if I need scoped style in component?

Use something else than Laravel Mix, I’m afraid.

[lucaros97]

If I comment the row in my vuejs file and refresh the page works perfectly, and the if uncomment it and reload works.

[njoguamos]

First, go to vue dev tools and make sure that the user is actually included in the inertia response

Second, share your ./resources/js/Shared/Admin/Toolbar.vue component.

Thirdly, clarify whether you are using the following:

• Code splitting and dynamic imports
• You have styles in Toolbar.vue
• Whether you are facing the problem at local development or at production

[lucaros97]

The problem seems to happen at both local and production.

The user is not included in my inertia response but you can find it inside auth:

The only styles i have in Toolbar.vue is a z-index

This is my complete Toolbar.vue component:

<template>
  <div id="nav" class="bg-white border-b border-gray-200 fixed top-0 inset-x-0 z-100 h-16">
    <div class="md:px-8">
      <nav class="relative flex flex-wrap items-center justify-between md:py-3">
        <div class="relative z-10 flex-shrink-0 pl-4 py-4 md:p-0">
          <img class="w-56" src="logo.svg" alt="">
        </div>
        <div class="flex-shrink-0 pr-4 md:hidden">
          <button ref="openButton" @click="open" type="button" class="block text-gray-600 focus:outline-none focus:text-gray-900" aria-label="Menu">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M3 6C3 5.44772 3.44772 5 4 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H4C3.44772 7 3 6.55228 3 6Z"/>
              <path d="M3 12C3 11.4477 3.44772 11 4 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12Z"/>
              <path d="M4 17C3.44772 17 3 17.4477 3 18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18C21 17.4477 20.5523 17 20 17H4Z"/>
            </svg>
          </button>
        </div>
        <div class="hidden md:block md:ml-10 md:flex md:items-baseline md:justify-between md:bg-transparent">
          <div class="flex items-center px-6">
            <div id="dropdown" class="relative inline-block">
              <span @click="toggle" class="inline-flex items-center pl-6 py-2 pr-2 font-semibold rounded-lg hover:bg-gray-200 text-gray:900 focus:outline-none focus:bg-gray-400">
                <img class="h-8 w-8 rounded-full flex-no-shrink" src="https://images.unsplash.com/photo-1541271696563-3be2f555fc4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=1.75&w=200&h=200&q=80" alt="">
                <div class="ml-4">
                  <p class="font-semibold text-gray-900 leading-none">{{ $page.auth.user.first_name + ' ' + $page.auth.user.last_name }}</p>
                </div>
                <svg class="ml-2 h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"/>
                </svg>
              </span>
              <!-- <button @click="toggle" class="inline-flex items-center pl-6 pr-2 py-2 font-semibold text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
                Account
              </button> -->
              <transition
                enter-class="opacity-0 scale-90"
                enter-active-class="ease-out transition-fastest"
                enter-to-class="opacity-100 scale-100"
                leave-class="opacity-100 scale-100"
                leave-active-class="ease-in transition-fastest"
                leave-to-class="opacity-0 scale-90"
              >
                <!-- Replace "right-0 origin-top-right" with "left-0 origin-top-left" to left-align the dropdown -->
                <div v-if="isAccountDropdownOpen" class="mt-2 absolute right-0 origin-top-right">
                  <div class="w-64 text-left bg-white rounded-lg shadow-lg">
                    <div class="border-t-2 border-gray-200 py-1">
                      <a href="#" class="block px-6 py-3 leading-tight hover:bg-gray-200">Settings and Privacy</a>
                      <a href="#" class="block px-6 py-3 leading-tight hover:bg-gray-200">Language</a>
                    </div>
                    <div class="border-t-2 border-gray-200 py-1">
                      <a href="#" class="block px-6 py-3 leading-tight hover:bg-gray-200">Advertise</a>
                      <a href="#" class="block px-6 py-3 leading-tight hover:bg-gray-200">Analytics</a>
                    </div>
                    <inertia-link class="border-t-2 border-gray-200 py-1" :href="route('logout')" method="post">
                      <button class="block w-full px-6 py-3 text-left leading-tight hover:bg-gray-200">Sign out</button>
                    </inertia-link>
                  </div>
                </div>
              </transition>
            </div>
          </div>
        </div>
      </nav>
    </div>

    <div class="md:hidden">
      <!-- Off-canvas menu background overlay -->
      <transition
        enter-class="opacity-0"
        enter-active-class="ease-out transition-medium"
        enter-to-class="opacity-100"
        leave-class="opacity-100"
        leave-active-class="ease-out transition-medium"
        leave-to-class="opacity-0"
        appear
      >
        <div v-show="isOpen" class="z-10 fixed inset-0 transition-opacity">
          <div @click="close" class="absolute inset-0 bg-black opacity-50" tabindex="-1"></div>
        </div>
      </transition>
      
      <!-- Off-canvas menu -->
      <transition
        enter-class="translate-x-full"
        enter-active-class="ease-out transition-slow"
        enter-to-class="translate-x-0"
        leave-class="translate-x-0"
        leave-active-class="ease-in transition-medium"
        leave-to-class="translate-x-full"
        appear
      >
        <div v-show="isOpen" class="z-10 fixed inset-y-0 right-0 max-w-xs w-full bg-white transition-transform overflow-y-auto">
          <div class="relative z-10 bg-white">
            <div :class="isOpen ? 'block' : 'hidden'" class="absolute top-0 right-0 p-4">
              <button ref="closeButton" @click="close" type="button" class="text-gray-600 focus:outline-none focus:text-gray-900" aria-label="Close">
                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M18.2929 19.7071C18.6834 20.0976 19.3166 20.0976 19.7071 19.7071C20.0976 19.3166 20.0976 18.6834 19.7071 18.2929L13.4142 12L19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L12 10.5858L5.70711 4.29289C5.31658 3.90237 4.68342 3.90237 4.29289 4.29289C3.90237 4.68342 3.90237 5.31658 4.29289 5.70711L10.5858 12L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L12 13.4142L18.2929 19.7071Z"/>
                </svg>
              </button>
            </div>
            <div class="px-4 pt-4 pb-6">
              <!-- <img class="h-8 w-8" src="/img/example-logo.svg" alt=""> -->
              <img class="w-56" src="logo.svg" alt="">
              <a href="#" class="mt-8 block text-xs font-semibold text-gray-600 uppercase tracking-wider">Products</a>
              <a href="#" class="mt-4 block font-medium text-gray-900 hover:text-gray-700">Checkout</a>
              <a href="#" class="mt-4 block font-medium text-gray-900 hover:text-gray-700">Payments</a>
              <a href="#" class="mt-4 block font-medium text-gray-900 hover:text-gray-700">Billing</a>
              <a href="#" class="mt-4 block font-medium text-gray-900 hover:text-gray-700">Insights</a>
            </div>
            <div class="border-t-2 border-gray-200 px-4 pt-6">
              <a href="#" class="block font-medium text-gray-900 hover:text-gray-700">Marketplace</a>
              <a href="#" class="mt-4 block font-medium text-gray-900 hover:text-gray-700">Partners</a>
              <a href="#" class="mt-4 block font-medium text-gray-900 hover:text-gray-700">About</a>
            </div>
          </div>
          <div class="relative bg-white">
            <div class="px-4 pt-4 pb-6">
              <a href="#" class="block font-medium text-gray-900 hover:text-gray-700">Log in</a>
            </div>
            <div class="p-4">
              <a href="#" class="block px-3 py-3 font-medium text-center bg-gray-300 rounded-lg text-gray-900 hover:bg-gray-400 focus:outline-none focus:bg-gray-400">Create Account</a>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      isOpen: false,
      isAccountDropdownOpen: false,
    }
  },
  methods: {
    open() {
      this.isOpen = true
      this.$nextTick(() => {
        this.$refs.closeButton.focus()
      })
    },
    close() {
      this.isOpen = false
      this.$nextTick(() => {
        this.$refs.openButton.focus()
      })
    },
    toggle() {
      this.isAccountDropdownOpen = !this.isAccountDropdownOpen
    },
  },
  watch: {
    isOpen: {
      immediate: true,
      handler(isOpen) {
        if (isOpen) {
          document.body.style.setProperty('overflow', 'hidden')
        } else {
          document.body.style.removeProperty('overflow')
        }
      }
    }
  }
}
</script>
<style lang="scss">
  .z-100 {
    z-index: 100 !important;
  }  
</style>

[lucaros97]

Also without styles the error persists.

What i made now to throw the error is to rebuild my assets with npm run watch and refresh the page

[njoguamos]

@lucaros97 sorry. Let us know when you get a solution.

[lucaros97]

Ok I found the problem.
Every time i stop npm run watch on my project and then throw it again, the error comes
Didn't find any solution at it

[lucaros97]

Ok @sebastiandedeyne using asset versioning seems to work. I'll update you for this

[vanderb]

@lucaros97 @sebastiandedeyne
In my case this error occurs only if i set scoped-styles.

My setting

• No asset version in dev-mode (only in production)
• Using code-splitting
• Used <style lang="scss" scoped> in component/page-component

Can anyone confirm that?

[vanderb]

@Juhlinus Yes after some further testing I came up with that. Thank you.

[borovez]

Yes I am having this exact same issue... and I was starting to doubt myself... Thanks for informing us it is an issue with Laravel Mix.

[anilwarbhe]

what's the solution if I need scoped style in component?

[imkonsowa]

it's late but why wouldn't you wrap your component with a parent class like .parent-class
and in your scss you can write your style like:

.parent-class {
// child elements styles go here
}