React App production build blank has nothing but a blank page

user_13380647 0
Viewed 726

I am quite new to react (and still learning), so I apologize if the problem is too basic.

I have created a shoe store App (inspired by this tutorial on React Router v6)

The problem I am facing is that the App works perfectly on development build.

GIF of working dev build

But when I create a production build (yarn build) and serve it using npx serve -s build, I get an empty page

Production build screenshot

The console gives an error that shoeData (a javascript object on a separate shoeData.js file with named export.) is not defined. There was no such error on development build. In fact, just before the errors on the console in the production build, an array has been logged twice using the following code

console.log(Object.keys(shoeData).filter((productId) => shoeData[productId].featured));

The above code uses the shoeData object, therefore the object is available to the component at least initially.

I have also modified the package.json to add "homepage": "." since people have solved similar issues using this fix, but it doesn't work in this case.

The complete project is available on GitHub here

Any help in this regard would be highly appreciated

react-router reactjs javascript
2 Answers

What I can see on url is that, ReferenceError: shoeData is not defined is being shown. Please look after it.

I'm also looking what's the reason just cloning the repo

user_109713020

This line looks weird，you should pass string to src rather than require a file.

I just clone the repo and make sure the problem is cause by require().

Steps to fix:

  1. Move images/ into public/ folder
  2. Replace all require('...').default with image url, such as /images/${shoeData[productId].gender}/${productId}/01.jpg.
  3. Remove homepage field from package.json
user_54965750
Related