React project on Codepen shows Object error

Hi,
I have a calculator project on Codepen, which worked fine before I tried to clean the code with online formatter.
Now it shows object error in the console but there is no red line in my js section so that I don’t know how to find where the error is from.
Could someone take a look for me and tell me how I can debug in this case?
Thank you in advance.

When I open up the “real” console, the browser console (usually something like Ctrl + Shift + J) I see the following error:

iframeConsoleRunner-d8236034cc3508e70b0763f2575a8bb5850f9aea541206ce56704c013047d712.js:1 Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

When I go to that link, I see:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Your hook usage looks fine, so looking at your JS library imports:

Screen Shot 2021-10-05 at 8.43.46 AM

I see that you have two versions of React imported. When I delete all of those and reinstall React and React DOM, your app loads for me.

1 Like

Thank you so much!
It works now! (CSS didn’t come back tho …)

You don’t have a parent with class “keypad” around the buttons (I’m assuming that was your intention based on the CSS you currently have in your codepen).

1 Like

I will check again. Thank you.
I noticed that my CSS came back the other day without me doing anything and now it is crushed again. Perhaps there may be a bug with codepen.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.