Inertia: Error: Cannot find module './Pages/Home'

Created on 14 Sep 2020 · 4Comments · Source: inertiajs/inertia

Im not getting a compile error but an error in the browser console

Screenshot 2020-09-14 at 22 20 25

Im sure its a silly newbie mistake.

This is what I have done.

New Laravel app (with Laravel 8) laravel new inertial-example
Server side setup composer require inertiajs/inertia-laravel
Set root template code and change welcome.blade.php to app.blade.php
Client side setup npm install @inertiajs/inertia @inertiajs/inertia-vue
Initialize app and code in resources/js/app.js (using the first one)

import { InertiaApp } from '@inertiajs/inertia-vue'
import Vue from 'vue'

Vue.use(InertiaApp)

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)

Run npm install
Run npm run watch
This gives an error. It says "To install it, you can run: npm install --save vue"
Run npm install --save vue
Compiling now works

My routes and controllers

// Web.php
Route::get('/', [PagesController::class, 'index']);

// PagesController
use Inertia\Inertia;

class PagesController extends Controller
{
    public function index()
    {
        echo 'index';
        return Inertia::render('Pages/Home');
    }
}

My vue pages is /resources/js/Pages/Home.vue

<template>
  <div>
    <h1>Welcome</h1>
    <p>Hello World. Welcome to your first Inertia app!</p>
  </div>
</template>

<script>
  export default {
      mounted() {
      console.log('Component mounted.')
    }
  }
</script>

Source