LaravelにInertiaをいれたら、BladeにCannot read properties of null (reading ‘dataset’)と出たときの対処法

LaravelにInertiaを入れた後、Bladeファイルを表示した時に、コンソールに下記のように表示されることがあります。

app.js:10 Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘dataset’)

対策を紹介しますね。

resource/js/app.jsファイルを開きます。

CreateInertiaAppの部分を、次のようなif構文で囲みます。if構文の意味は「もしapp.blade.phpの型がundefinedではないなら」という意味です。

【app.js編集後】

デフォルトでは、Vueファイルはresource/views/app.blade.phpをテンプレートにしています。

Vueファイルではなく、Bladeファイルを開いた時には、resource/views/app.blade.phpは使われません。そのため、app.blade.phpのデータ型は、undefinedとなります。

この動きを利用して、上記のようなIF構文にしました。

このIF構文をいれることで、Vueファイルを開いているときだけ、createInertiaAppのコードが実行されます。

参考になれば幸いです♪

Inertia関係の他の記事はこちら↓

備忘録メモ

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

最新のLaravel10版テキストに加え、Laravel8版・Laravel9版もご用意しています♪

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。
Laravel10対応。Laravel11サポートガイドもご用意しています。詳しくは下記ボタンをクリック♪

書籍の詳細を見てみる

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravel10対応

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる


Laravelの教科書限定コミュニティ【Laravelの教科書ラボ】はじめました。
セミナーで、StripeやChatGPT連携、デバックなど実践スキルを分かりやすく学べます。

ラボの案内を見てみる

Twitter始めました。
40代からプログラミング!
タイトルとURLをコピーしました