Setting up Inertia.js with Vue 3 and Typescript #942

isaac-souza · 2021-10-15T22:47:53Z

isaac-souza
Oct 15, 2021

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 this tutorial https://laravel-news.com/typescript-laravel and inertiajs docs https://inertiajs.com/client-side-setup

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>

Printscreen of the error's location according to the browser console

isaac-souza · 2021-10-16T11:37:47Z

isaac-souza
Oct 16, 2021
Author

For some reason I freaking removed the defer from the app.js script and it was breaking things up, it is always something silly

2 replies

reinink Oct 16, 2021
Maintainer

Glad you got it figured out. 😎

SkullMasher Nov 3, 2023

It's the second time I get back to this discussion and don't learn my lesson, thanks for taking the time to share your struggle and the solution.

<script src="/js/app.js" defer></script>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Setting up Inertia.js with Vue 3 and Typescript #942

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{title}}

Select a reply

Setting up Inertia.js with Vue 3 and Typescript #942

isaac-souza Oct 15, 2021

Replies: 1 comment · 2 replies

isaac-souza Oct 16, 2021 Author

reinink Oct 16, 2021 Maintainer

SkullMasher Nov 3, 2023

isaac-souza
Oct 15, 2021

Replies: 1 comment 2 replies

isaac-souza
Oct 16, 2021
Author

reinink Oct 16, 2021
Maintainer