Laravel 8 (Inertia js) - Getting Vue error 'app.js:30559 [Vue warn]: Error in created hook: "Error: Cannot find module...'

Question

I have setup a Laravel 8 installation that uses Jetstream (inertia js stack). All Jetstream provided views are working correctly.

The issue is when I create a new Route that renders a new Vue template, I get this error in my console:

app.js:30559 [Vue warn]: Error in created hook: "Error: Cannot find module './Test'"

My Route created in web.php

Route::get('/test', function() {
    return Inertia\Inertia::render('Test');
});

The 'Test.vue' file is in the 'resources/js/Pages' directory.

<template>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Testing
            </h2>
</template>

app.js

require('./bootstrap');

import Vue from 'vue';

import { InertiaApp } from '@inertiajs/inertia-vue';
import { InertiaForm } from 'laravel-jetstream';
import PortalVue from 'portal-vue';

Vue.use(InertiaApp);
Vue.use(InertiaForm);
Vue.use(PortalVue);

const app = document.getElementById('app');

new Vue({
    render: (h) =>
        h(InertiaApp, {
            props: {
                initialPage: JSON.parse(app.dataset.page),
                resolveComponent: (name) => require(`./Pages/${name}`).default,
            },
        }),
}).$mount(app);

Any idea why the Test.vue template is not being found?

Answer 1

Maybe somebody else is getting here like I did - I had to open developer console in Chrome and make sure that in the Network tab, I had disable cache checked.

And on top, had to go into my server and do php artisan optimize to clear cached views.