Unhandled Errors Error from Website after modifying page.jsx with a conditional component.
Answered
.dric posted this in #help-forum
.dricOP
Hello. I'm getting this error from my website, after creating a component that only showed up on a specific day using regular JS.
In my page.jsx I have component that I created nested inside a <main> tag.
I'm unsure why this error is showing, as the website loads perfectly fine.
Here are the 2 errors I'm getting from my webpage. I put them into a txt file because the text was too big to put here.
Please let me know if there's any other information you need to help me resolve this bug. Thanks!
In my page.jsx I have component that I created nested inside a <main> tag.
I'm unsure why this error is showing, as the website loads perfectly fine.
Here are the 2 errors I'm getting from my webpage. I put them into a txt file because the text was too big to put here.
Please let me know if there's any other information you need to help me resolve this bug. Thanks!
Answered by !=tgt
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
},[]);
if (!mounted) {
return null;
};Put this before your 2 return statements
34 Replies
What is your code that's giving this problem?
@.dric I think this might be my issue, but how do I solve it?
hm
where does your application use these variables?
where does your application use these variables?
.dricOP
in this if statement
@.dric in this if statement
try to refactor it so that there's no conditional returns
.dricOP
hmm
@.dric hmm
whats your full code
.dricOP
I'll send it in a txt file
or actually I'll just take screenshots
send it as a message
.dricOP
there's too much characters so discord wont let me
.dricOP
alright
this file is just a component btw
after doing a little research I found out the issue is because of date()
and the server side uses UTC time zone while client side uses the time zone relative to your computer im guessing
@!=tgt
@.dric <@1053443057451794585>
yeah thats the problem
@.dric you can try an early return or initially display time in utc and have an effect get the offset and fix it
.dricOP
hmm okay
I'll that that out
@.dric I'll that that out
early return means that the component won't render on the server
.dricOP
how do i do that
is there a specific return method
@.dric is there a specific return method
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
},[]);
if (!mounted) {
return null;
};Put this before your 2 return statements
Answer
this prevents anything from being rendered on the server,
.dricOP
okay thank you
are there any imports I need or is it included in the package
I found the imports
thank you for your help