Level 102
Check that it actually has an ID. It might be null
Nov 29, 2021
11
Level 50
Uncaught (in promise) Error: Ziggy error: 'id' parameter is required for route
Hi I am working inertia and laravel single page app. I am getting error as
Uncaught (in promise) Error: Ziggy error: 'id' parameter is required for route 'event-details.reservations.index'.
at 2:26
at String.replace (<anonymous>)
at t.e.compile (2:26)
at u.f.toString (2:26)
at Proxy.<anonymous> (2:26)
at Proxy.render (app.js:35286)
at renderComponentRoot (app.js:10573)
at ReactiveEffect.componentUpdateFn [as fn] (app.js:14320)
at ReactiveEffect.run (app.js:8965)
at setupRenderEffect (app.js:14446)
but I am passing all the routes.
I have one page called events and event-detail. In event page I am using the route like this
<Link
:href="
route('event-details.reservations.index', {
'language': $page.props.current_locale,
'id': id,
})
"
>
</Link>
my routes file
Route::group(['prefix' => '{language}'],function(){
Route::get('events',[HomeController::class,'event'])->name('events');
Route::get('events-details/{id}',[HomeController::class,'eventDetail'])->name('event-details.reservations.index');
})
when I click on this link then I am getting error that is in event-details page. I am not understanding where I am going wrong.
Level 50
@sinnbeck Id is present. In event page I am not getting any error. when I click on that link it is redirect to event detail page and I am getting an error. In event-detail page I am not using that route link as well.
Level 102
@shariff I assume you get it as a Javascript error from ziggy? Can you show the pages code?
Level 50
@Sinnbeck okay
event page
<template>
<div class="col-md-4">
<Link
:href="
route('event-details.reservations.index', {
'language': $page.props.current_locale,
'id': id,
})
"
>
<div class="sao-box1 text-center">
<img :src="imgSrc" alt="" class="img-fluid rounded_img" />
<h3>{{ title }}</h3>
<div class="event-description" v-html="description"></div>
<a class="sl-btnBook">Book</a>
</div>
</Link>
</div>
</template>
when I click on that link it is redirect to below component
<template>
<app-layout selected="5">
<main class="has-bg-image">
<div class="overlay"></div>
<reservation-component
v-if="reservationForm"
@handleReservationForm="handleReservationForm($event)"
:event_details="event_details"
:time_interval="time_interval"
/>
<availablity
v-if="availablityForm"
:availablities="availablities"
:reservation="formData.reservation"
@handleTimeSelectionForm="handleTimeSelectionForm($event)"
@handleBack="handleBack($event)"
/>
<package-selection
v-if="packageSelectionForm"
:events="events"
:event_details="event_details"
:formData="formData"
@handlePackageSelectionForm="handlePackageSelectionForm($event)"
@handleBack="handleBack($event)"
/>
<user-form
v-if="userForm"
:formData="formData"
@handleUserForm="handleUserForm($event)"
@handleBack="handleBack($event)"
/>
</main>
</app-layout>
</template>
<script>
import AppLayout from "../../components/Layout/MainLayout.vue";
import ReservationComponent from "../../components/Reservation/Reservation.vue";
import Availablity from "../../components/Reservation/Availablity.vue";
import PackageSelection from "../../components/Reservation/PackageSelection.vue";
import UserForm from "../../components/Reservation/UserForm.vue";
import SuccessForm from "../../components/Reservation/Success.vue";
export default {
props: ["events", "event_details","time_interval"],
components: {
AppLayout,
ReservationComponent,
Availablity,
PackageSelection,
UserForm,
SuccessForm,
},
data() {
return {
url: window._url,
reservationForm: true,
availablityForm: false,
packageSelectionForm: false,
userForm: false,
successForm: false,
packages: [],
availablities: {},
formData: this.$inertia.form({
reservation: {},
timeSlot: "",
package_details: {},
user_details: {},
}),
};
},
mounted() {
$('#top-header').addClass('bg-gray');
},
};
</script>
Level 102
@shariff so you are taken to the second page before the error occurs? And it was in Javascript, not the response from laravel? Can you access the second page manually?
Also.. Where is the first page getting ID from? Is there some code for the page you aren't showing? Same with title?
1 like
Level 50
@sinnbeck yes I am getting error in second page. Error is in javascript. And I cannot ale to access that page manually as well. In first page I am getting id's from laravel response.
Level 102
@shariff Ok. so if the error only comes on the second page, and it comes if you load it directly, lets ignore the first. So go to the second page and get the error. Then click the small triangle in front of the error, and see if you can locate what line triggers the error.
1 like
Level 50
@sinnbeck I tried removing route and gave normal url. Now I am getting error what you told before.
Uncaught (in promise) TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
at u.f.toString (events:26)
at Object.h [as mergeDataIntoQueryString] (app.js:52)
at Proxy.<anonymous> (app.js:40)
at renderComponentRoot (app.js:10573)
at ReactiveEffect.componentUpdateFn [as fn] (app.js:14320)
at ReactiveEffect.run (app.js:8965)
at setupRenderEffect (app.js:14446)
at mountComponent (app.js:14229)
at processComponent (app.js:14187)
Don't know why the id is getting null in first page.
Level 1
Was there ever a solution here? I am having the same issue.
I can confirm that the missing param error happens after navigation and that the param is present in the URL as well as properly dumps (DD()) from the controller method before the call to render the view.
I am using InertiaJS and React and I have used this pattern/method dozens of times with no issues.
Inertia.visit(route('private-convo.dash', response.data.conversation.id))
Route::get('/direct-message/{chat}', [PrivateConversationViewController::class, 'dashboard'])->name('private-convo.dash');
{
public function dashboard(PrivateConversation $chat) {
dd($chat);
return Inertia::render('PrivateConversationDash', [
'chat' => $chat
]);
}
}
The dd() shows the correct object when using implicit binding or simply the correct ID when not.
If I comment out the dd() the page attempts to render and then throws the Error: Ziggy error: 'chat' parameter is required for route 'private-convo.dash'.
1 like
Level 1
@smesj instead of: route('private-convo.dash', response.data.conversation.id)
try:
route('private-convo.dash', $page.props.response.data.conversation.id)
assuming you passed the parameter $response from PHP, then it goes under $page.props in VUE
Level 3
I have been getting the same error on inertia. Fixed it by populating the database with dummy data and then using those IDs for testing the route. It was probably throwing the error because there was no data for route model binding.
Please or to participate in this conversation.