Laravel8+Inertia.js+Vue3+TS项目App变量类型错误与构建错误求助

报错原因是你使用的@inertiajs/inertia-vue3@0.5.2版本中，createInertiaApp的setup回调参数导出的组件是小写命名app，和你写的大写App不匹配。
两种修复方案二选一：

• 直接修改resources/js/app.ts的setup参数命名：

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

createInertiaApp({
  // 建议把require改成动态import，适配TS和ES模块规范
  resolve: async name => (await import(`./Pages/${name}`)).default,
  // 把App改成小写app
  setup({ el, app, props, plugin }) {
    createApp({ render: () => h(app, props) })
      .use(plugin)
      .mount(el)
  },
})

• 升级Inertia相关依赖到最新稳定版，新版已经统一使用大写App作为参数名。

报错原因是Babel默认没有配置处理TS类型注解，Vue模板编译出来的带类型标注的render函数被当成普通JS解析，导致语法识别失败。
按顺序执行以下操作：

1. 修改webpack.mix.js配置，将入口处理方法从mix.js改为mix.ts，适配TypeScript项目：

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

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

2. 安装TS对应的Babel预设：

sail npm install @babel/preset-typescript --save-dev

3. 在项目根目录新建.babelrc配置文件，内容如下：

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ]
}

4. 清空node_modules和lock文件后重新安装依赖，再执行构建命令即可：

rm -rf node_modules package-lock.json
sail npm install
sail npm run watch

内容的提问来源于stack exchange，提问作者Isaac Souza