When using the exact same React component in normal React deploy to locally on gatsby, I get the following structure, which is what I expect: there is a form and after it there is a div with
However, on Netlify I get the following weird structure: I get this div duplicated and the contents moved inside of it
The top div which the arrow is pointing at, comes out of nowhere.
To compare, here is the link of the exact same code, deployed elswere: https://www.codeforhumans.info/payment?amount=50
It is pure React, no Gatsby, but the issue doesn’t happen on Gatsby locally either.
Here is another example:
<div id="___gatsby"> <div class="wrapper"> <div tabindex="-1" id="gatsby-focus-wrapper" style="outline: none;"> <div class="web-course"> <section>
<div id="___gatsby"> <div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"> <div class="web-course"> <div class="web-course"> <section>
Any ideas why Netlify messes with my JSX?