Front End Development Libraries Projects - Build a JavaScript Calculator

Tell us what’s happening:
The app won’t render in Codepen, and the browser console shows the below error:

“Uncaught SyntaxError: The requested module ‘/-/use-sync-external-store@v1.2.0-nObtrbhT9AtrsvWQs6X4/dist=es2019,mode=imports/unoptimized/shim/index.js’ does not provide an export named ‘useSyncExternalStore’ (at react-redux.js:1:9)”

I believe this has something to do with how the libraries for react, redux, and react-redux are imported, but I’m not sure. Adding those libraries via the “Settings → External Scripts” doesn’t seem to change anything.

Does anybody have any hints or links to materials I can read up on to correct this issue?
Thanks in advance.

Your code so far

Code can be found at

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge: Front End Development Libraries Projects - Build a JavaScript Calculator

Link to the challenge:

I’ve since completed (I think) the functions of the calculator and just need it to render so I can test it.

The “Uncaught SyntaxError” has gone, but it has been replaced by an error which reads:
“Uncaught TypeError: Cannot read properties of undefined (reading ‘input’)

I assume this means that it is finding that the “input” property on line 173 (the mapStateToProps function) does not reference an existing part of the “state” but I am sure that I’ve properly defined a “state” that includes that property.

Can anyone tell me what the issue might be?

Thanks in advance.

First, you need to remove all your script/import tags in the HTML and JS panes and import your JS assets via the JS configuration tool, because now several are multiply defined. Then, you will have errors where you are not using the correct names and namespaces, so you will need to fix those errors. Finally, since you are using React 18, you should change your render call at the end to the new style for React 18.

Ultimately, I had to create a new pen to get around the failure to render problem (I was using known working code, not yours). I’m not sure why that is the case, but you may want copy/paste your code to a new pen after you comment the imports and script tags in the code. I really couldn’t debug this problem but I believe it’s due to the multiple imports of assets.

1 Like

I’ve now moved the project over to VisualStudio Code, fixing the imports so that I could use newer Redux tools of “configureStore”, as well as changing the rendering method to the “createRoot” of React 18.

I still have problems rendering the app, as well as the “Uncaught TypeError” regarding reading the input in the “mapStateToProps” function, as in the screenshot below:

Code is available here: Javascript-Calculator/javascript-calculator at master · justin-y-f/Javascript-Calculator · GitHub

Can anybody enlighten me as to the issue? I am still totally clueless.
Thanks in advance.

You really need to get a minimally rendering app on codepen and then work from there to make things easy for others to debug your code. It’s orders of magnitude easier to quickly debug a project on codepen as opposed to cloning a repo and running create react app.

This appears to be the same error as before, so if your app is rendering anything (so you know something is working), that still means that the mapStateToProps function is getting an undefined argument and then trying to use its input property. To start debugging, I would log that argument in the caller and in mapStateToProps and work backwards from there.

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