Post inline images not showing when using gatsby-source-wordpress with Framer Motion animation

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Hi there,

I have a new Gatsby site which sources page content from a Wordpress site via gatsby-source-wordpress.

It also uses Framer Motion to provide page transitions via the AnimatePresence component.

After updating Gatsby recently I have noticed that there is a bug arising with images in the page content. On the initial page load, or when pressing refresh, the images show as expected, however when a page is navigated to via another page (i.e. invoking the AnimatePresence animation, the images are not revealed.

Note 1: this only happens when the exitBeforeEntry prop is set on the AnimatePresence component (which is required

Note 2: this only occurs with images in the post content. If I display other images (e.g. the post’s featured image) using GatsbyImage, they load as expected in all situations.

Any help would be much appreciated. I’m at a loss with how to debug this issue. Thanks.

Reproduction Link

https://github.com/mrbjjackson/gatsby-source-wordpress-framer-motion-bug

Steps to Reproduce

I have created a minimal reproduction that demonstrates the problem.

Also - there is a live version of the site here

Essentially, this bug occurs when using Gatsby 4, gatsby-source-wordpress with Framer Motion. I have recently updated the site (from Gatsyb 2) and I’m 90% sure this bug was not occuring before I updated.

Expected Result

The post content images to display as usual.

Actual Result

Post images show on the initial page load. However if you navigate to the page from another page, they do not appear.

Environment

System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4750HQ CPU @ 2.00GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 15.11.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.6.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 96.0.4664.55
    Firefox: 94.0.1
    Safari: 12.1.2
  npmPackages:
    gatsby: ^4.4.0-next.0 => 4.4.0-next.0 
    gatsby-plugin-image: ^2.3.0 => 2.3.0 
    gatsby-plugin-manifest: ^4.3.0 => 4.3.0 
    gatsby-plugin-react-helmet: ^5.3.0 => 5.3.0 
    gatsby-plugin-sharp: ^4.3.0 => 4.3.0 
    gatsby-plugin-sitemap: ^5.3.0 => 5.3.0 
    gatsby-source-wordpress: ^6.3.0 => 6.3.0 
    gatsby-transformer-sharp: ^4.3.0 => 4.3.0 
  npmGlobalPackages:
    gatsby-cli: 4.2.0

Config Flags

No response

[mrbjjackson]

The only work around I found for the time-being was to add the following option to gatsby-config.js as an option in gatsby-source-wordpress:

html: {
          useGatsbyImage: false
}

See here for documentation

Obviously this is far from ideal as the Gatsby Image optimisations are one of my primary reasons for using Gatsby. However for now it does work as a fix for me.

[github-actions[bot]]

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜