Rendering wrong components in production

[MotaZor94]

Description

Hello everyone, I am currently creating a webinar registration page which should after the webinar has passed turn into a webinar recording page and change the content of a few components, nothing exotic.

I am using moment.js to compare the time and change the content accordingly.

The problem occurs only when I serve the application but not in the develop mode.

Steps to reproduce

Try to compare the dates and change the content of the components based on the date and run the static HTML in the browser.

Expected result

So below you can see how the page looks like after the webinar time has passed in develop mode. Everything looking good, no errors, and everything behaving as it should. PERFECT

Actual result

So over here below you can see how the page looks like when I deploy it to Netlify and wait for the webinar time to pass.
It breaks and it shows different components in the wrong places, for example it showed an oversized icon instead of the image that it was supposed to display and it displayed a second form in full width.

I am using moment js and comparing the time in variable with the actual time and passing down the prop to the components which should hide or show after the time has passed.

Why is the behavior different in production like this?

Environment

System:
OS: macOS 10.15.1
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.15.0 - /usr/local/bin/node
Yarn: 1.19.2 - /usr/local/bin/yarn
npm: 6.14.9 - ~/.npm-global/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 87.0.4280.67
Safari: 13.0.3
npmPackages:
gatsby: ^2.24.87 => 2.24.87
gatsby-cli: ^2.12.16 => 2.12.102
gatsby-image: ^2.4.3 => 2.4.20
gatsby-link: ^2.4.2 => 2.4.15
gatsby-plugin-asset-path: ^2.0.2 => 2.0.2
gatsby-plugin-google-tagmanager: ^2.3.1 => 2.3.14
gatsby-plugin-manifest: ^2.4.2 => 2.4.33
gatsby-plugin-offline: ^3.2.1 => 3.2.30
gatsby-plugin-react-helmet: ^3.3.1 => 3.3.12
gatsby-plugin-sharp: ^2.6.2 => 2.6.38
gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
gatsby-react-router-scroll: ^2.3.1 => 2.3.1
gatsby-source-filesystem: ^2.3.1 => 2.3.32
gatsby-source-strapi: 0.0.12 => 0.0.12
gatsby-transformer-sharp: ^2.5.2 => 2.5.16

[jamo]

Based on the oddly scaled images it seems more like a CSS issue, anything relevant in devtools (failed css assets maybe)?

Is the time used for comparisons evaluated when rendering the static assets, or dynamically when the user is viewing the page?

Without code, it's hard to say much.

[MotaZor94]

Hi Jamo, the issue is fixed, what the problem was is that I was hiding the component with a null so something like this:

if(Recording){ CalendarSection = null; } else { CalendarSection = <Calendar display={display} webinarDate={webinarDate} webinarTime={webinarTime} />

And that seemed to be working in the develop server but not in production as you can see in the case above.

So I just switched to a ternary operator with display none or block and it fixed the issue.

<Calendar display={Recording ? {display : 'none'} : {display : 'block'}} webinarDate={webinarDate} webinarTime={webinarTime} />

I'm just wondering why is it that it behaved like that only in production after the build? Would you know the answer to that maybe?