Laravel Jetstream-Inertia出现reading 'dataset'类型错误求解决方法

算力阿峰

2026-9-25

报错信息

app.js:10 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'dataset')
    at exports.createInertiaApp (app.js:10)
    at Module../resources/js/app.js (app.js:27154)
    at __webpack_require__ (app.js:53738)
    at app.js:53903
    at Function.__webpack_require__.O (app.js:53775)
    at app.js:53905

根因说明

该报错本质是createInertiaApp执行初始化时，指定的挂载DOM节点为null，无法读取其dataset属性。

解决排查步骤

检查resources/views/app.blade.php文件，确认存在标准Inertia根挂载节点：
正确写法为 <div id="app" data-page="{{ json_encode($page) }}"></div>，需确认节点id未被修改、未被注释/删除、data-page属性未被遗漏。

检查resources/js/app.js中createInertiaApp的配置，确认el参数的选择器和模板根节点id一致，标准参考配置：

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

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

检查JS加载顺序：确认引入app.js的script标签要么放在HTMLbody标签末尾，要么添加了defer属性，避免DOM未完成渲染就提前执行Inertia初始化代码。
排查全局自定义脚本：确认没有其他JS代码在Inertia初始化前执行了删除、替换根挂载节点的操作。
直接对比你新建的正常运行的Jetstream-Inertia项目的app.blade.php、resources/js/app.js两个核心文件的差异，逐一修正不一致的配置项即可。