Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args
Answered
Lilac posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
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
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
LilacOP
Someone, please
I'm in desperation
![Avatar](https://cdn.discordapp.com/avatars/855485422933901322/ccbbf7ee16ce0d742531cd49be95020f.webp?size=256)
Jesse677
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
![Avatar](https://cdn.discordapp.com/avatars/855485422933901322/ccbbf7ee16ce0d742531cd49be95020f.webp?size=256)
Jesse677
@Lilac is it fixed
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
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
![Avatar](https://cdn.discordapp.com/avatars/855485422933901322/ccbbf7ee16ce0d742531cd49be95020f.webp?size=256)
Jesse677
just put the code here
I'm having a look
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
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;
![Avatar](https://cdn.discordapp.com/avatars/855485422933901322/ccbbf7ee16ce0d742531cd49be95020f.webp?size=256)
Jesse677
use three backticks
instead of one
also put jsx after the first pair of backticks
so you can get syntax highlighting
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
LilacOP
done, thanks for a tip
didn't know how to do this
![Avatar](https://cdn.discordapp.com/avatars/855485422933901322/ccbbf7ee16ce0d742531cd49be95020f.webp?size=256)
Jesse677
Are you using app router
do you have a git repo I can look at
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
LilacOP
No, pages router
![Avatar](https://cdn.discordapp.com/avatars/855485422933901322/ccbbf7ee16ce0d742531cd49be95020f.webp?size=256)
Jesse677
where is your lib folder
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
LilacOP
/pages/lib/
![Avatar](https://cdn.discordapp.com/avatars/855485422933901322/ccbbf7ee16ce0d742531cd49be95020f.webp?size=256)
Jesse677
that's your problem
move it to the root of your project
![Avatar](https://cdn.discordapp.com/avatars/855485422933901322/ccbbf7ee16ce0d742531cd49be95020f.webp?size=256)
Jesse677
it thinks that /pages/lib/db is a page
Answer
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
LilacOP
wow
thanks, i will try to
![Avatar](https://cdn.discordapp.com/avatars/855485422933901322/ccbbf7ee16ce0d742531cd49be95020f.webp?size=256)
Jesse677
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
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
LilacOP
THANK YOU VERY MUCH
THAT WORKED
I'VE BEEN TRYING TO FIX THAT FOR 3 DAYS
I LOVE YOU 🥹🥹🥹
![Avatar](https://cdn.discordapp.com/avatars/855485422933901322/ccbbf7ee16ce0d742531cd49be95020f.webp?size=256)
Jesse677
no worries
remember to mark as answer @Lilac
here @Lilac