Next.js Discord

Discord Forum

Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args

Answered
Lilac posted this in #help-forum
Open in Discord
Avatar
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?
Answered by Jesse677
it thinks that /pages/lib/db is a page
View full answer

37 Replies

Avatar
LilacOP
Someone, please
I'm in desperation
Avatar
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
@Lilac is it fixed
Avatar
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
Avatar
just put the code here
I'm having a look
Avatar
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
use three backticks
instead of one
also put jsx after the first pair of backticks
so you can get syntax highlighting
Avatar
LilacOP
done, thanks for a tip
didn't know how to do this
Avatar
Are you using app router
do you have a git repo I can look at
Avatar
LilacOP
No, pages router
Avatar
where is your lib folder
Avatar
LilacOP
/pages/lib/
Avatar
that's your problem
move it to the root of your project
Avatar
it thinks that /pages/lib/db is a page
Answer
Avatar
LilacOP
wow
thanks, i will try to
Avatar
you can prove this because when you're in dev, try go to localhost:3000/lib/db and you'll get the same error
the only reason it's appearing to work is because it's only loading the pages you're on
Avatar
LilacOP
THANK YOU VERY MUCH
THAT WORKED
I'VE BEEN TRYING TO FIX THAT FOR 3 DAYS
I LOVE YOU 🥹🥹🥹
Avatar
no worries
remember to mark as answer @Lilac
here @Lilac