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.
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.
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.
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:
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.
