Vue component not loading in InertiaJS

Question

I'm using InertiaJS to build a Vue3 / Laravel app. When I run my app in the browser it gives me the following error in the console. I'm new to InertiaJS and Vue3 and don't know why my component doesn't render.

Uncaught (in promise) TypeError: l is null

web.php

// Home route. 
Route::get('/', [HomeController::class, 'index'])

HomeController.php

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

My app.blade.php file which is located under./resources/views/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>@yield('title') - Gainz</title>
        <meta 
        name="description" 
        content="@yield('description')">
        <meta name="google-site-verification" content="n5lVAknL3NblyWPmFzt3ARrtZbDDLIU-KOwA83NiO5w" />
        <!-- Roboto --> 
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,100;1,900&display=swap" rel="stylesheet"> 
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> 
        <!-- CSS --> 
        <link rel="stylesheet" href="/css/main.css">

        <!-- Bootstrap --> 
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

        <!-- Font Awesome --> 
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
        <!-- Custom scripts --> 
        <script src="/js/app.js"></script>  
    </head>
    <body onmousedown="handleClick(event)">
        @inertia()
        @yield('scripts')
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    </body>
</html>

webpack.mix.js

const mix = require('laravel-mix');
const path = require('path')

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */
mix .js('resources/js/app.js', 'public/js').vue()
    //.js('resources/js/track.js', 'public/js')
    //.js('resources/js/overview.js', 'public/js')
    //.js('resources/js/feed.js', 'public/js')
    .sass('resources/sass/main.scss', 'public/css');
// @ts-ignore
mix.webpackConfig({
    output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
    resolve: {
      alias: {
        '@': path.resolve('./resources/js'),
      },
      extensions: ['.js', '.vue', '.json'],
    },
    devServer: {
      allowedHosts: 'all',
    },
  });

app.js under./resources/js/app.js

// @ts-nocheck
require('./bootstrap');
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import { InertiaProgress } from '@inertiajs/progress'

// Creates the inertia vue app. 
createInertiaApp({
    resolve: (name) => require(`./Pages/${name}`),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el);
    },
});
// Progress bar. 
InertiaProgress.init()

Finally Home.vue under./resources/js/Pages/Home.vue

<template>
  <div>Hello world</div>
</template>

Answer 1

Adding the defer attribute to the script tags of the app.js in app.blade.php seems to have solved the issue.

  <!-- Custom scripts --> 
        <script src="{{ mix('/js/app.js') }}" defer></script>

Vue component not loading in InertiaJS

Question

1 answers

solution1
0 2022-01-24 17:15:45

Vue component not loading in InertiaJS

Question

1 answers

solution1 0 2022-01-24 17:15:45

solution1
0 2022-01-24 17:15:45