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?

rename `test` to anything else then compile it will work – Kamlesh Paul Sep 21 '20 at 10:19 — Kamlesh Paul, Sep 21 '20 at 10:19

score 10 · Answer 1 · answered Sep 23 '20 at 10:05

10

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.

answered Sep 23 '20 at 10:05

Matthias S

3,358
3
21
31

score 6 · Answer 2 · answered Sep 21 '20 at 10:29

6

Just needed to run 'npm run dev'

answered Sep 21 '20 at 10:29

JamesP27

123
2
7

score 1 · Answer 3 · answered Nov 19 '20 at 16:41

1

You should run this command: npm run watch

It will tracks all your changes and update the application.

answered Nov 19 '20 at 16:41

Tião Ricardo

11
3

score 1 · Answer 4 · answered Nov 25 '21 at 08:01

1

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

answered Nov 25 '21 at 08:01

Kamil B.

1,015
7
10

score 0 · Answer 5 · edited Jan 26 '22 at 13:11

0

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');

edited Jan 26 '22 at 13:11

Ares Draguna

1,641
2
16
32

answered Jan 25 '22 at 19:21

Evey

1
1

score 0 · Answer 6 · answered May 21 '22 at 10:50

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

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

6 Answers6