Error on "App" variable in a Inertia.js Laravel Typescript Vue 3 application-CodePudding

I'm trying to setup a new Laravel 8 project using the following stack, Laravel 8 Inertia.js Vue.js 3 Typescript (and TailwindCSS, tho not setup yet).

For some reason I getting a weird error on the "App" variable passed to the setup function in the app.ts file, it is highlighted by VSCode and when I hover it it says

Property 'App' does not exist on type '{ el: Element; app: InertiaApp; props: InertiaAppProps; plugin: Plugin_2; }'.ts(2339)

It must be something silly, as always, but I just can't figure out what it is.

I'm following this tutorial https://laravel-news.com/typescript-laravel and Inertia.js docs https://inertiajs.com/client-side-setup

I appreciate any help, thanks.

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

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'

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

------------------------------ Index.vue

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

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

    export default defineComponent({
        setup() {
            
        }
    })
</script>

------------------------------ 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
  }

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

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

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

------------------------------ 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"
    }
}

------------------------------ Error after running "sail npm run watch"

ERROR in ./resources/js/Pages/Dashboard/Index.vue?vue&type=template&id=48cd2f5e&ts=true (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/Dashboard/Index.vue?vue&type=template&id=48cd2f5e&ts=true)
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /var/www/html/resources/js/Pages/Dashboard/Index.vue: Unexpected token, expected "," (3:27)

  1 | import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
  2 |
> 3 | export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
    |                            ^
  4 |   return (_openBlock(), _createElementBlock("div", null, "Isaac"))
  5 | }
    at Parser._raise (/var/www/html/node_modules/@babel/parser/lib/index.js:541:17)
    at Parser.raiseWithData (/var/www/html/node_modules/@babel/parser/lib/index.js:534:17)
    at Parser.raise (/var/www/html/node_modules/@babel/parser/lib/index.js:495:17)
    at Parser.unexpected (/var/www/html/node_modules/@babel/parser/lib/index.js:3550:16)
    at Parser.expect (/var/www/html/node_modules/@babel/parser/lib/index.js:3524:28)
    at Parser.parseBindingList (/var/www/html/node_modules/@babel/parser/lib/index.js:10835:14)
    at Parser.parseFunctionParams (/var/www/html/node_modules/@babel/parser/lib/index.js:13881:24)
    at Parser.parseFunction (/var/www/html/node_modules/@babel/parser/lib/index.js:13859:10)
    at Parser.parseFunctionStatement (/var/www/html/node_modules/@babel/parser/lib/index.js:13496:17)
    at Parser.parseStatementContent (/var/www/html/node_modules/@babel/parser/lib/index.js:13179:21)

webpack compiled with 1 error

CodePudding user response：

Just had this last week myself. Make the App arg lowercase in the setup function:

setup({ el, app, props, plugin }) {
        createApp({ render: () => h(app, props) })

CodePudding user response：

I knew it was something silly

I was telling mix to process ts files as js (mix.js instead of mix.ts)

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

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

That's the proper way

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

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

That was it, problem solved