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

user_10382944 0
Viewed 6950

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?

jetstream inertiajs laravel vue.js
6 Answers

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.

user_16117250

Just needed to run 'npm run dev'

user_103829440

You should run this command: npm run watch

It will tracks all your changes and update the application.

user_61574900

Check if you have npm run watch or imho better npx mix watch. Try to php artisan optimize and of course, "hard reload" your browser - for Chrome it is Control+Shift+Delete on Windows and Command+Shift+Delete on MacOS

user_17603700

You need to run npm watch for the vue pages to render:

Route::middleware(['auth:sanctum', 'verified'])
    ->get('/chat', function () {
        return Inertia::render('Chat/container');
    })
    ->name('chat');
user_120479550

The error for me was in the way i created the module directory, it contained additional invisible characters different from its intended name so i had to recreate the directory and that solved it.

Ps : Anyone trying this can just refactor if possible

user_154595960
Related