As a beginner in learning React, I must apologize for any basic issues I may encounter.
I recently created a shoe store App (following this helpful tutorial on React Router v6)
Everything seems to be working perfectly in the development build of my app.
https://i.stack.imgur.com/6YwwH.gif
However, when I create a production build (yarn build) and serve it using npx serve -s build, all I see is an empty page.
https://i.stack.imgur.com/BbJYF.png
The console throws an error stating that the shoeData object (which is a JavaScript object stored in a separate file called shoeData.js with named export) is not defined. This error did not occur in the development build. Interestingly, just before this error in the production build, an array was logged twice using the following code snippet:
console.log(Object.keys(shoeData).filter((productId) => shoeData[productId].featured));
Considering that the above code successfully utilizes the shoeData object initially, it appears that the object should be accessible to the component.
I even tried adding
"homepage": "."package.json file, as some have suggested this could resolve similar issues. However, this did not work in my case.
You can find the complete project on GitHub here
Your assistance in resolving this issue would be greatly appreciated