React.js 我在 prod 中有 Bug，但在 dev 模式下没有，你能帮帮我吗

Question

I've been having a problem for 3 days now, and I don't really understand what can cause this bug, can you help me?

Here is the problem, I have created a small game(react.js) where 5 cards are displayed at each reload, these 5 cards have a score of points each which are cumulated each time, which gives a score of all the cards, then the score of each "hand" which is cumulated.

In development mode, everything works correctly, but if I build and put it on a cdn (netlify), the score logic doesn't work...

Prod link (bug) : https://are-you-lucky-game.netlify.app/

Github repo link (dev mode work fine) : https://github.com/rodolphe37/random-playing-card-tuto/tree/step-3-final

I think the problem may be coming from over here:

In my console on render (in dev)

score: undefined
classment from ScoreForm {pts: 0, name: ''}
scoreArray (5) [3, 7, 10, 15, 2]
classment from center Page {pts: 0, name: ''}
classment from state {pts: 0, name: ''}
classment from session  {pts: 0, name: ''}

score: undefined
classment from ScoreForm {pts: 0, name: ''}
scoreArray (5) [3, 7, 10, 15, 2]
classment from center Page {pts: 0, name: ''}
classment from state {pts: 0, name: ''}
classment from session  {pts: 0, name: ''}

score: 0
classment from ScoreForm {pts: 37, name: ''}
score: 37

in dev, my component is rendered several times (3 or 4 i think), and at the last render, the info is there.

In my Console (prod mode)

score: undefined
classment from ScoreForm {pts: 0, name: ''}
scoreArray (5) [5, 25, 3, 6, 1]
classment from center Page {pts: 0, name: ''}
classment from state {pts: 0, name: ''}
classment from session  {pts: 0, name: ''}
score: 0
classment from ScoreForm {pts: 0, name: ''}``

In production, my component is rendered two time I think, so my values are not there.

How can I make sure that my info (it comes from sessionStorage) is present at the first render of each component?

If you have ever encountered this kind of bug, or if you think you have a solution for me, I'm interested.

Thanks in advance!

Answer 1

I can see in your repo that you are using browserslist in package.json This is common in react-create-app as this library will bundle your code based on the configuration that is provided. Notice that you have two different configurations for development and production, try using the same config you have in development also for producttion object, this should fix your issue.