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
– Kamlesh Paul

2020-09-21 10:19:54 +00:00
Commented Sep 21, 2020 at 10:19 — Kamlesh Paul
– Kamlesh Paul, Commented Sep 21, 2020 at 10:19

Matthias S · Accepted Answer · 2020-09-23 10:05:50Z

11

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, 2020 at 10:05

Matthias S

3,5834 gold badges26 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JamesP27 · Accepted Answer · 2020-09-21 10:29:41Z

6

Just needed to run 'npm run dev'

answered Sep 21, 2020 at 10:29

JamesP27

1232 silver badges7 bronze badges

Comments

Tião Ricardo · Accepted Answer · 2020-11-19 16:41:56Z

1

You should run this command: npm run watch

It will tracks all your changes and update the application.

answered Nov 19, 2020 at 16:41

Tião Ricardo

113 bronze badges

Comments

Kamil B. · Accepted Answer · 2021-11-25 08:01:00Z

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, 2021 at 8:01

Kamil B.

1,6231 gold badge10 silver badges11 bronze badges

Comments

Ares Draguna · Accepted Answer · 2022-01-26 13:11:55Z

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, 2022 at 13:11

Ares Draguna

1,6702 gold badges16 silver badges33 bronze badges

answered Jan 25, 2022 at 19:21

Evey

11 bronze badge

Comments

Lanlokun · Accepted Answer · 2022-05-21 10:50:31Z

0

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

answered May 21, 2022 at 10:50

Lanlokun

11 bronze badge

Collectives™ on Stack Overflow

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

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related