Level 29
For what are you using @viteReactRefresh and @livewireStyles ?
In your head try to put @inertiaHead under @vite('resources/js/app.tsx')
@routes
@vite('resources/js/app.tsx')
@inertiaHead
Aug 28, 2024
5
Level 1
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'dataset') with Inertia and Typescript
I'm trying to deploy my test project for a company on Heroku. I had a bunch of problems with it, and I fixed them, but the current one still persists and there's nothing that helps me on the web.
My site works fine with localhost, but everything I get on the Heroku version is a white screen with @routes @livewireStyles @inertiaHead @inertia as the only text content on it. In the console, I get this stuff:
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'dataset') at $E (app-DUYZ23nC.js:125:1381) at app-DUYZ23nC.js:125:1912
I tried adding @vite('resources/js/app.tsx') to the main blade view both in the header and body after @inertia / @inertiaHead, but nothing worked.
This is the blade file now:
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts -->
@routes
@viteReactRefresh
@livewireStyles
@inertiaHead
@vite('resources/js/app.tsx')
</head>
<body class="font-sans antialiased">
@inertia
</body>
The previous errors I had are:
1.Mix manifest not found at: /app/public/mix-manifest.json
It was fixed by adding @vite('resources/js/app.tsx') to the blade file
2.Mixed content issue- Content must be served as HTTPS
Fixed by changing the .env APP_URL
Any suggestions how to fix the Inertia issue?
Level 1
@gych @viteReactRefresh was there initially, and I found @livewireStyles in another laracast, where it wass added with @vite.
I just tried to so as you said, now I get just these three on white bg: @routes @inertiaHead @inertia and the same error in the console
Level 29
@atryknaav Ah ye @viteReactRefresh is because you're using Inertia with React but I don't think you need @livewireStyles since that is for a Laravel Livewire project not Laravel with Inertia.
You can leave @viteReactRefresh in the head under @routes
@routes
@viteReactRefresh
@vite('resources/js/app.tsx')
@inertiaHead
Which steps did you exactly take when deploying your app to heroku? Have you followed a guide?
Level 1
@gych Yes, I followed the steps that Heroku provides you with, when you press 'Create a new project'. It tells you to get the CLI and gives a bunch of commands
Level 29
@atryknaav The Heroku guide is for a Laravel blade application without React and Inertia.
Try to follow this guide: https://dev.to/rabeeaali/how-to-deploy-inertia-js-to-heroku-2cdn
You also need the nodejs buildpack for a Laravel React Inertia application.
Please or to participate in this conversation.