Anilink changes classes of sibling divs

[toppsdown]

Hi there, I've been dealing with a super weird issue which I have now narrowed down to a problem with Anilink. In development, everything works fine. But in production, when the javascript initializes on the page, the classes of divs that are siblings of Anilink get rearranged which causes all sorts of problems.

I've reduced this to a basic working case on my local machine:

React Code

import React from 'react'
import AniLink from 'gatsby-plugin-transition-link/AniLink'

const TestClass = props => {
  return (
      <div>
        <AniLink
          cover
        >
          <p>Anilink</p>
        </AniLink>
        <div className='test_one'>
          <p>Test1</p>
        </div>
        <div className='test_two'>
          <p>Test2</p>
        </div>

        <div className='test_three'>
          <p>Test3</p>
        </div>

        <div className='test_four'>
          <p>Test4</p>
        </div>

        <div className='test_five'>
          <p>Test5</p>
        </div>
      </div>
  )
}

export default TestClass

HTML generated in production build

<div>
  <a>
    <p>Anilink
    </p>
  </a>
  <div class="test_one">
    <p>Test1
    </p>
  </div>
  <div class="test_two">
    <p>Test2
    </p>
  </div>
  <div class="test_three">
    <p>Test3
    </p>
  </div>
  <div class="test_four">
    <p>Test4
    </p>
  </div>
  <div class="test_five">
    <p>Test5
    </p>
  </div>
</div>

HTML after javascript initializes

<div>
  <a>
    <p>Anilink
    </p>
  </a>
  <div class="test_two">
    <p>Test1
    </p>
  </div>
  <div class="test_three">
    <p>Test2
    </p>
  </div>
  <div class="test_four">
    <p>Test3
    </p>
  </div>
  <div class="test_five">
    <p>Test4
    </p>
  </div>
  <div class="test_five">
    <p>Test5
    </p>
  </div>
</div>

Notice that the class names have all been moved up one.

Mitigations

1. Replacing "cover" with "fade" fixes the problem.
2. Wrapping the Anilink in its own div fixes the problem.

If there's anything else I can provide to help diagnose, please let me know. Thanks!

[p-mc-b]

I am experiencing something similar.

A grid of cards, some wrapped with divs, but most wrapped in AniLinks, is causing really strange problems, but only in production, which makes this great to debug.

First of all some classes (using Tailwind) were missing for only one specific card / the card had the wrong classes.

I was also not able to change them. E.g. going from className="mb-2 text-lg leading-none lg:mb-3 text-cb-900 lg:text-xl 2xl:text-2xl 3xl:text-3xl 4xl:text-4xl" to className="text-cb-500" didn't change the classes after deployment at all. I assume that these classes came from another element.

This first issue seems to have been "solved" by replacing the AniLink tag of a sibling with an anchor tag. An semantically identical card in the same grid had no problems.

Second of all, another card, that was not wrapped in an AniLink tag, somehow caused a section > div without the transition-link-portal class to be appended to the bottom / body of the page.

As this issue seems to behave somewhat similar to issues that arise without using persistent layout, I removed all other components from the page and disabled all other pages in the project, to rule those out as possible sources of the problem. Unfortunately without any success, the problem still persisted.

The second issue was "solved" by removing all AniLinks from the page.

I also just tested replacing "cover" with "fade" and wrapping the AniLink tags in an additional div as @toppsdown stated and both indeed solved the second issue for me.

[p-mc-b]

@TylerBarnes

This started now to affect another page, without me understanding how that came to be. Interestingly enough, I didn't do any changes to this page and it worked for a very long time in that state flawlessly.

The problem was not reproducible in development though.

Develop:

Build, then serve:

I again wrapped the AniLink in an additional div and have it now working again normally. (huge thanks to @toppsdown for figuring this issue out and providing ways to mitigate)

[toppsdown]

So I just learned about the React hydration issue:

• https://github.com/gatsbyjs/gatsby/discussions/17914
• https://www.joshwcomeau.com/react/the-perils-of-rehydration/

I'm guessing whatever issue is happening here is related to that