TypeError: Cannot read properties of null (reading 'dataset')

[JeroenBoesten]

Jetstream Version

5.0.5

Jetstream Stack

Inertia

Laravel Version

11.6.0

PHP Version

8.3

Database Driver & Version

No response

Description

We're using jetstream and had a issue when we were loading in a certain amount (in our case 100 Resources on a overview) of data we got the following javascript error in the console:

Uncaught (in promise)
TypeError: Cannot read properties of null (reading 'dataset')
        at Qb (app-CvG2p1gB.js:98:25466)
        at app-CvG2p1gB.js:102:16565

After some research I stumbled upon this laracast item: https://laracasts.com/discuss/channels/inertia/inertiajs-vuejs-3-typescript-got-error-cannot-read-properties-of-null-reading-dataset and tried the mentioned solution of switching the order of the script tags in the app.blade.

Before:

        @routes(nonce: Vite::cspNonce())
        @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
        @inertiaHead

After:

        @routes(nonce: Vite::cspNonce())
        @inertiaHead
        @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])

In our case this seemed to have resolved the issue, which got me wondering if there is a reason this is not the default in the jetstream app.blade.php file.

Steps To Reproduce

Unfortunately I did not find the specific root cause or trigger to make a public reproducable repository.

[timacdonald]

@JeroenBoesten, I dug into this and it lead me to believe this may be something to do with SSR rendering and accessing an element that has not yet been rendered on the page.

Could you please search your project for uses of dataset?

I have a feeling it could be used in the initialPage prop?

Could you also share your createInertiaApp declaration in both your app.js and ssr.js?

[driesvints]

Closing this issue because it's inactive, already solved, old or not relevant anymore. Feel to open up a new issue if you're still experiencing this.