Gatsby deploy rearranges my JSX

Support
,
1

URL: https://ecstatic-ptolemy-9fb915.netlify.app/direct-payment/?amount=50

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 opacity: 0

However, on Netlify I get the following weird structure: I get this div duplicated and the contents moved inside of it

Screen Shot 2020-08-23 at 13.49.32
Screen Shot 2020-08-23 at 13.49.321326×246 49.9 KB

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: Domain Details Page
It is pure React, no Gatsby, but the issue doesn’t happen on Gatsby locally either.

Here is another example:
Original:

<div id="___gatsby">
  <div class="wrapper">
    <div tabindex="-1" id="gatsby-focus-wrapper" style="outline: none;">
      <div class="web-course">
        <section>

Netlify:

<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?

2

Are you sure you’ve got everything exactly synced between netlify and your local? Differing versions of software (node, yarn, node modules) often have effects like these.

I ask this, because I do not believe “Netlify” is doing anything to this file - we do change some files at deploy, but they are not changes like the one you link (mostly related to parsing forms, and adding canonical link headers: Improved SEO with canonical link headers and injected html snippets: Snippet injection | Netlify Docs) - so this feels more like a “we ran the build and that was the output” than “we changed something after the build completed” to me, so I’m guiding you towards debugging that build.

This doc talks about best practices in syncing versions as well as how to build locally (under “What Next?”) so you can debug better: