Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args
Answered
Lilac posted this in #help-forum
LilacOP
Hello everyone. I created a project on next.js and in development mode everything is okay. However, when I do npm run build I get Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=%5Bobject%20Promise%5D for the full message or use the non-minified dev environment for full errors and additional helpful warnings. This happens in the file in which I have send queries to database. Here's the code for it: https://pastebin.com/hkLex9hs
How do I fix this error?
How do I fix this error?
37 Replies
LilacOP
Someone, please
I'm in desperation
It’s because you’re trying to render an object
It literally says in the error message
Send your jsx
What you have in the pastebin is useless
@Lilac is it fixed
LilacOP
No. I have all of my code posted in this question: https://stackoverflow.com/questions/77988916/next-js-trying-to-build-production-objects-are-not-valid-as-a-react-child-foun
Can you check it out there or should I still send a pastebin with everything? @Jesse677
Can you check it out there or should I still send a pastebin with everything? @Jesse677
just put the code here
I'm having a look
LilacOP
Okay
pages/lot.ts:
function RecentLots() {
const [data, setData] = useState<{ lot_id: number; image: string; title: string; category: string; current_price: number; end_date: string; }[]>([]);
useEffect(() => {
fetch('/api/lastLots')
.then((res) => res.json())
.then((data) => {
setData(data.data);
});
}, []);
return (
<section id={styles["recent-lots-section"]}>
{data.map((item, index) => (
<article onClick={() => CallLotInfoPopUp(item.lot_id)} className={styles["recent-lot"]} key={index}>
<img className={styles["lot-img"]} src={`/lotsImages/${item.image}`} alt={`/lotsImages/${item.image}`} />
<div className={styles["lot-info-description"]}>
<div className={styles["title-category-container"]}>
<h3 className={styles["lot-title"]}>{item.title}</h3>
<h3 className={styles["lot-categoty"]}>{item.category}</h3>
</div>
<div className={styles["price-deadline-container"]}>
<h3 className={styles["lot-price"]}>{item.current_price} грн</h3>
<h4 className={styles["dates-before-deadline"]}>До кінцÑ: {item.end_date}</h4>
</div>
</div>
<div className={styles["btn-container"]}>
<a onClick={function() { CallMakeBid(index);}} className={styles["make-bid-shortcut-btn"]}>Bid</a>
</div>
</article>
))}
<div id={styles["all-lots-link-container"]}></div>
</section>
);
}
export default RecentLots;
use three backticks
instead of one
also put jsx after the first pair of backticks
so you can get syntax highlighting
LilacOP
done, thanks for a tip
didn't know how to do this
Are you using app router
do you have a git repo I can look at
LilacOP
No, pages router
where is your lib folder
LilacOP
/pages/lib/
that's your problem
move it to the root of your project
it thinks that /pages/lib/db is a page
Answer
LilacOP
wow
thanks, i will try to
you can prove this because when you're in dev, try go to
localhost:3000/lib/db
and you'll get the same errorthe only reason it's appearing to work is because it's only loading the pages you're on
LilacOP
THANK YOU VERY MUCH
THAT WORKED
I'VE BEEN TRYING TO FIX THAT FOR 3 DAYS
I LOVE YOU 🥹🥹🥹