CODEWITHSUNDEEP
laravelvue.jsinertiajs
wale
wale

Reputation: 93

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

I have just setup Intertia with Vue and laravel and I can't seem to get the pages to load I am having this error enter image description here

Here is the setup

app.js

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

createInertiaApp({
  resolve: async (name) => {
    const pages = import.meta.glob('./Pages/**/*.vue')

    return (await pages[`./Pages/${name}.vue`]())
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

IndexController.php 

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class IndexController extends Controller
{
    public function index()
    {
        return inertia('Index/Index');
    }
    public function show(){
        return inertia('Index/Show');
    }
}

web.php 

Route::get('/', [IndexController::class, 'index']);
Route::get('/show', [IndexController::class, 'show']);

here is just some basic vue template Index.vue

<template>
    <div>index</div>
</template>

I expect for the index.vue to be displayed just showing the simple text index

Upvotes: 3

Views: 7180

Answers (4)

Reven Erlangga
Reven Erlangga

Reputation: 1

In my case, it was writing .vue in my path or you using \ instead of / :

This code is wrong

return Inertia::render('Admin/Master/Discount/Index.vue'); // sample one

return Inertia::render('Admin\Master\Discount\Index'); // sample two

This code is correct

return Inertia::render('Admin/Master/Discount/Index');

Upvotes: 0

Jason Silver
Jason Silver

Reputation: 756

I ran into this issue and it was due to case-sensitive directory naming on ubuntu. It was working fine locally on my PC but when deploying to the server it would fail. I had named the folder /pages not /Pages.

Upvotes: 0

eylay
eylay

Reputation: 2168

For me, it was writing .vue in my path:

return Inertia::render('Dashboard/Admin/Home.vue'); // wrong

I removed .vue and problem solved

return Inertia::render('Dashboard/Admin/Home'); // correct

Upvotes: 2

wale
wale

Reputation: 93

Solved the issue was having the Pages folder in the wrong folder The pages folder should be in resources/js/Pages. My mistake was having the pages folder in resources/js

Upvotes: 3

Related Questions