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

When using shared data in Vue.js passed from my AppServiceProvider it returns this message error when i try to load the page.

app.js:64 Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (app.js:64)
    at Object../node_modules/css-loader/index.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/Shared/Admin/Toolbar.vue?vue&type=style&index=0&lang=scss& (0.js?id=ad5928fae408418d3200:295)
    at __webpack_require__ (app.js:64)
    at Object../node_modules/style-loader/index.js!./node_modules/css-loader/index.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/Shared/Admin/Toolbar.vue?vue&type=style&index=0&lang=scss& (0.js?id=ad5928fae408418d3200:334)
    at __webpack_require__ (app.js:64)
    at Module../resources/js/Shared/Admin/Toolbar.vue?vue&type=style&index=0&lang=scss& (0.js?id=ad5928fae408418d3200:1504)
    at __webpack_require__ (app.js:64)
    at Module../resources/js/Shared/Admin/Toolbar.vue (0.js?id=ad5928fae408418d3200:1453)
    at __webpack_require__ (app.js:64)
    at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/Shared/Layout.vue?vue&type=script&lang=js& (0.js?id=ad5928fae408418d3200:250)

This is how i pass my data on my boot function inside AppServiceProvider:

Inertia::share([
  // Lazily
  'auth' => function () {
    return [
      'user' => Auth::user() ? [
        'id' => Auth::user()->id,
        'first_name' => Auth::user()->name,
        'last_name' => Auth::user()->surname,
        'profile_image' => Auth::user()->profile_image,
      ] : null
    ];
  },
  'errors' => function () {
    return Session::get('errors')
      ? Session::get('errors')->getBag('default')->getMessages()
      : (object) [];
  },
]);

My web.php route

Route::get('/')->name('dashboard')->uses('DashboardController')->middleware('auth');

My Vue file:

<p class="font-semibold text-gray-900 leading-none">{{ $page.auth.user.first_name + ' ' + $page.auth.user.last_name }}</p>

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 17 (1 by maintainers)

Most upvoted comments

@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>

njoguamos on Nov 4, 2019

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

lucaros97 on Nov 4, 2019

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

Juhlinus on Jun 3, 2020

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

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

Juhlinus on Jul 3, 2020

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?

sebastiandedeyne on Nov 6, 2019