'TypeError: Cannot read properties of null (reading 'dataset') in Laravel Jetstream-inertia

This error suddenly appears out of nowhere. i tried reinstalling the npm packages but it doesn't work. but when it works when i create a fresh project of jetstream-inertia with the same npm packages. Any Help? Tested on Chrome:

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
laravelnpmwebpackinertiajsjetstream


Solution 1:[1]

just put the script tag after @inertia tag in HTML. this error occurred because the script tag was in the head tag and vue couldn't find the #app element. i believe you removed the "defer" attribute from the script tag. either add the defer attribute or load the app.js at the end.

Solution 2:[2]

You need to add the defer attribute to your script tag within the head tag like so :

<head>
  ........
 
  <script src="{{ mix('/js/app.js') }}" defer></script>
</head>

Alternatively, you could add the script just below the @inertia tag in the scripts section excluding the defer attribute like so:

@inertia
<script src="{{ mix('/js/app.js') }}"></script> 
.......
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 arifxxx
Solution 2 Macdonald

Related Questions