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/[email protected]/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/[email protected]/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>

Sjos Sivlingworkz · Accepted Answer · 2022-01-24 17:15:45Z

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>

answered Jan 24, 2022 at 17:15

Sjos Sivlingworkz

1873 silver badges16 bronze badges

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

2 Comments

Gander7 Over a year ago

Be helpful to some people to directly link to the "defer" documentation if possible or include why you think this solved your issue. Thanks for providing a solution :)

Paul Allsopp Over a year ago

Indeed! I'm having the same issue with a template not rendering its content, but I already had the defer attribute. My question is here if anyone has an answer: stackoverflow.com/questions/70977245/…

Collectives™ on Stack Overflow

Vue component not loading in InertiaJS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related