(SOLVED) onClick function working locally but not on deployment

Support
, , , ,
#1

SOLVED - See reply comment for details

Hello! Would love some help!

I have a create-react-app hosted on Netlify at the domain www.rapguide.com

I have a function that runs find locally but not on the deployment

To Recreate
If you scroll to the bottom on the home page and click on the video called (T.V.O.L. This View of Life) you will get to a page with lyrics, some of the lyrics have annotations, you can click on them to view the annotations. This work great on desktop but on mobile the click handler is not triggering. It works totally fine locally, any ideas? There are other onClick handlers on the page that work just fine.

What I have tried
One post I found on this forum suggested making sure the Node version is the same so I set a NODE_VERSION environment variable to match my local version and re-deployed and that works just fine.

Thanks in advance!!
Jesse

#2

SOLVED: (kind of) It appears that the order that the CSS was processed, or the order in which it was compiled was different.

I haven’t identified exactly why or what the order difference is but if I add !important tags to my CSS it works both locally and on the deployment which tells me it is a cascade problem.

Still trying to figure out exactly what’s going on but basically I have styles in my index.scss and styles locally in a component using styled components.

One possibility is that locally my sass gets compiled differently (or in a different order) then on Netlify. That’s my best guess so far anyways!

Either way the !important worked as a hack/quick fix for now, I will likely just move those styles into the styled component to fix it in a more proper way.

#3

Hey @jessejburton, welcome to the Netlify Community forum! :wave:

I just skimmed the link you posted and did a full-text search of your CSS. I’m not seeing any of the !important rules you mentioned, so either you fixed it some other way, or it’s working fine without them?

I’m not as familiar with react, but from what I do know, I recall that style scoping is a big part of the framework in terms of what components get styled and where they get styled. Where CSS is usually allowed to cascade through every element in the document, react I believe will allow you to scope styles to a specific element or component so they don’t leak into other components. This allows you to write selectors at the highest level possible without running into issues.

Glad to hear that you got a solution in the works, best of luck!

#4

Hey @noelforte Yeah your understanding of React is correct and that seems to be exactly what the issue was :slight_smile: Thanks for your response! Much appreciated.