No props when deployed
Unanswered
Northeast Congo Lion posted this in #help-forum
Northeast Congo LionOP
Hey guys, weird issue here. I have a page using the pages router that vomits on the deployed version of the page, but not the others. I've traced down the reason to missing "props" values.
EX:
I'm not running this exact code but something similar. I'm presented with a error:
the props log returns {}
this error only happens when deployed (I'm using AWS)
also, this error seems to only happen when there's a url route parameter.
EX:
getServerSideProps(context:any){
....
return{
props:{
something:"ABCDE"
}
}
}
export default function Home(props:{something:string}}){
console.log(props)
console.log(props.something)
}I'm not running this exact code but something similar. I'm presented with a error:
Application error: a client-side exception has occurred (see the browser console for more information).
the props log returns {}
this error only happens when deployed (I'm using AWS)
also, this error seems to only happen when there's a url route parameter.
25 Replies
Northeast Congo LionOP
Oh, and this goes away after you refresh the page for some reason
export const getServerSideProps: GetServerSideProps = (context) => {
// your code here
return{
props:{
something:"ABCDE"
}
}
}
type TProps = {
something: string;
};
const HomePage = (props: TProps) => {
console.log(props)
console.log(props.something)
// you must return JSX
return (
<h1>{props.something}</h1>
);
}
export default HomePage;@Northeast Congo Lion
Northeast Congo LionOP
it returns JSX, the example I showed here was not the actual code on mine and it errors out before it gets past the props.something line
provide more details, pls
Northeast Congo LionOP
Give me a moment, in a call
I'm not sure that I can help you without code details
Northeast Congo LionOP
Alright. Off the call. The code is proprietary and can't be sent in whole. In the code example provided, I used "props.something", but the true value is "props.taskdata".
export async function getServerSideProps(context:any){
......
return {
props:{
admin: isAdmin,
taskData: SerializedTask,
isClient: user.clientId ? true : false,
isVendorController: user.vendorroles.includes("Controller"),
viewer: serializeUser(user)
}
}export default function Home(props:{admin:boolean, taskData:SerializedTask, isClient:boolean, clientData:SerializedClient, isVendorController:boolean, viewer:SerializedUser}) {
const [width, setWidth] = useState<number>(200);
console.log("props", props)the line "props" prints "{}"
a line later in the code throws an error when I try to access props.something (as expected, as that value is clearly undefined according to Home)
so the question is, why is props = {}
and why does it go away when I refresh
and why does it only show up when deployed
@Vadym tsx
export const getServerSideProps: GetServerSideProps = (context) => {
// your code here
return{
props:{
something:"ABCDE"
}
}
}
type TProps = {
something: string;
};
const HomePage = (props: TProps) => {
console.log(props)
console.log(props.something)
// you must return JSX
return (
<h1>{props.something}</h1>
);
}
export default HomePage;
@Northeast Congo Lion can you make same structure as in my example here
It looks like something with syntax’s
Northeast Congo LionOP
What specifically should be changed?
Northeast Congo LionOP
Just going to gently bump this if anyone has time to take a look!
Northeast Congo LionOP
This appears to be a nextjs error. I, and multiple other people, have had this exact issue with nextjs.
It seemed to be patched in previous versions, but apparently it's not as fixed as it seems to be.
Northeast Congo LionOP
Anyone know why my props aren't showing up?