Inertia.js + Vue 3 + TS = "Cannot read properties of null (reading 'dataset')"

Hi guys, I'm trying to setup a new Laravel 8 project that uses Inertia.js + Vue.js 3 + Typescript (and TailwindCSS, but didn't setup yet tho)

When I run "sail npm run watch" it compiles without any errors, but when I hit the browser, I get the following in the console

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'dataset')
    at exports.createInertiaApp (app.js:10)
    at Module../resources/js/app.ts (app.js:20077)
    at __webpack_require__ (app.js:26187)
    at app.js:26340
    at Function.__webpack_require__.O (app.js:26224)
    at app.js:26342
    at app.js:26344

It must be something silly as always

I'm following a tutorial from laravel-news (the slug is "typescript-laravel") and the client side inertiajs docs page

I appreciate any help.

Here are some of the project files

----------------------------------------- package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@vue/compiler-sfc": "^3.2.20",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "ts-loader": "^9.2.6",
        "typescript": "^4.4.4",
        "vue-loader": "^16.8.1"
    },
    "dependencies": {
        "@inertiajs/inertia": "^0.10.1",
        "@inertiajs/inertia-vue3": "^0.5.2",
        "@inertiajs/progress": "^0.2.6",
        "vue": "^3.2.20"
    }
}

----------------------------------------- resources/js/app.ts

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";
 
InertiaProgress.init();

createInertiaApp({
    resolve: (name) => require(`./Pages/${name}`),
    setup({ el, app, props, plugin }) {
        createApp({ render: () => h(app, props) })
            .use(plugin)
            .mount(el);
    },
});

----------------------------------------- webpack.mix.js

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

mix.ts('resources/js/app.ts', 'public/js').vue({version: 3})
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

-----------------------------------------tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "es2020",
        "moduleResolution": "node",
        "baseUrl": "./",
        "strict": true,                 // Enable strict type-checking options
        "skipLibCheck": true,           // Skip type checking of declaration files
        "noImplicitAny": false          // Bypass raising errors on `any` type
    },
    "include": ["resources/js/**/*"]  // Frontend paths pattern
}

----------------------------------------- resources/views/app.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}"></script>
</head>
<body>
    @inertia
</body>
</html>

----------------------------------------- routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Index');
});

----------------------------------------- resources/js/Pages/Index.vue

<template>
    <div>
        <p>Isaac</p>
    </div>
</template>

<script lang="ts">
    import { defineComponent } from 'vue'

    export default defineComponent({
        
    })
</script>

----------------------------------------- Browser view-source

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="/css/app.css" rel="stylesheet" />
    <script src="/js/app.js"></script>
</head>
<body>
    <div id="app" data-page="{&quot;component&quot;:&quot;Index&quot;,&quot;props&quot;:{&quot;errors&quot;:{}},&quot;url&quot;:&quot;\/&quot;,&quot;version&quot;:&quot;207fd484b7c2ceeff7800b8c8a11b3b6&quot;}"></div>
</body>
</html>

wisefool

4 years ago

Level 1

Try adding the defer prop to the script tag in your blade template, or move it below the @inertia insertion.

2 likes

brianHyfos

3 years ago

Level 1

Hi @wisefool , I have followed all the options that are listed on the inertia.js documentation. But I still get a blank page that gives me @inertiaHead @inertia as the only text rendered. In the console terminal I get the below errors;

app.js:10 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'dataset') at exports.createInertiaApp (app.js:10:9722) at ./resources/assets/js/app.js (app.js:2108:73) at __webpack_require__ (app.js:19610:42) at app.js:19894:64 at __webpack_require__.O (app.js:19647:23) at app.js:19896:53 at app.js:19898:12