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の教科書の詳細を見る

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

「Laravelで業務効率化用のWebアプリを開発してほしい」
「社内にLaravelが分かる人がいない。コンサルしてほしい」
そんな企業様のご依頼承っています。
お問い合わせはこちら
Laravelを使ったWebアプリ開発のご相談承り中
Zoomでのお打ち合わせも承っています♪
お問い合わせはこちら
Twitter始めました。
40代からプログラミング!

コメント

タイトルとURLをコピーしました