Laravel 8 Jetstream Inertia is not rendering a view component

Question

I just started building a web application using Laravel 8. I have noticed that a couple of things have changed in the Laravel 8. I am using Jetstream and Inertia for authentication and admin dashboard. I am trying to render a Inertia Vue JS component in the controller action method. But it is not working as expected. This is what I have done so far.

I created a Vue js component under resources/js/Pages/MenuCategory/MenuCategoryList.vue with the following code.

<template>
    <div>
        <h1>Menu Category List</h1>
    </div>
</template>

<script>
export default {
    name: "MenuCategoryList"
}
</script>

<style scoped>

</style>

Then in the controller, I render the component as follow.

class MenuCategoryController extends Controller
{
    //
    public function index()
    {
        return Inertia::render('MenuCategory/MenuCategoryList');
    }
}

But it is not rendering in the browser and throwing the following error in the console.

[Vue warn]: Error in created hook: "Error: Cannot find module './MenuCategory/MenuCategoryList'"

found in

---> <Inertia>
       <Root>
warn @ app.js:28523
logError @ app.js:29782
globalHandleError @ app.js:29777
handleError @ app.js:29737
invokeWithErrorHandling @ app.js:29760
callHook @ app.js:32109
Vue._init @ app.js:32891
VueComponent @ app.js:33036
createComponentInstanceForVnode @ app.js:31179
init @ app.js:31010
createComponent @ app.js:33862
createElm @ app.js:33809
patch @ app.js:34398
Vue._update @ app.js:31835
updateComponent @ app.js:31956
get @ app.js:32367
Watcher @ app.js:32356
mountComponent @ app.js:31963
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:36933
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:39833
./resources/js/app.js @ app.js:42184
__webpack_require__ @ app.js:20
0 @ app.js:42227
__webpack_require__ @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
app.js:29786 Error: Cannot find module './MenuCategory/MenuCategoryList'
    at webpackContextResolve (app.js:41505)
    at webpackContext (app.js:41500)
    at Object.resolveComponent (app.js:42179)
    at Object.setPage (app.js:109)
    at Object.init (app.js:109)
    at VueComponent.created (app.js:96)
    at invokeWithErrorHandling (app.js:29752)
    at callHook (app.js:32109)
    at VueComponent.Vue._init (app.js:32891)
    at new VueComponent (app.js:33036)

I tried changing the action method to this.

public function index()
        {
            return Inertia::render('MenuCategoryList');
        }

I am still getting the same error. What is wrong with my code and how can I fix it?

Answer 1

I had the same issue, I changed public function index() to public function page() and it worked.

Answer 2

If you run the command npm run watch, the project always rebuilt automatically. Then you should hard refresh(Ctrl + F5) your browser to get latest change.