Issues with domready—animation flickering on page load.

[piotrfonte]

I’m having a hard time getting around an issue that I think has to do with domready. Each time I load my site (https://piotrf.pl) the plain keyframe CSS animations are being triggered twice, which causes an awkward flickering: https://s3-us-west-2.amazonaws.com/dropbox.piotrf.pl/Untitled.mov

Note how this flickering occurs only on server, not on hotloaded localhost. Here’s why I think domready might be involved:

Has anyone encountered a similar issue?

[migs540]

Yes I've been looking into this for the past two days. I have the same symptoms - keyframes get triggered twice on initial load. What I have noticed so far is:

• I'm now using a poor workaround at futurebrilliant.team : I have disabled keyframes on the initial (index.js) page. I have keyframe animations on linked pages (sub-pages). With this workaround if a user lands on index then they don't see a keyframe animation. While reading the index page js and sub-pages load in. When they navigate to a sub-page they see one keyframe. If, however, they land on a subpage (first) then they see the keyframe animation being triggered. It's due to timing.

• Slowing the load down using dev tools network (slow 3G), I can see the animation is triggered twice. The first time on html load. The second time is when any of the "bootstrap" js or domlazyload are downloaded. see photo.

• I wonder if it is to do with styled-components? It might be worth inlining animations (css) to see if that makes a difference?

• I built a test example from https://github.com/gatsbyjs/gatsby/tree/master/examples/using-gatsby-image - I made a few edits to the original. I added styled-components. I added a keyframe animation and a H1 heading and a div/box that obscures the background image. It's this div box that is animated as a 1 second transition in. Take a look at it, I've put it up temporarily at: trustingcustomers.com

• Here's the code for index.js showing the keyframes css:

import React from "react"
import Link from "gatsby-link"
import Img from "gatsby-image"
import Navigation from "../components/navigation"

import { rhythm, options } from "../utils/typography"
import { injectGlobal, css, keyframes } from "styled-components"
import styled from "styled-components"

const swingDown = keyframes`
  100% { transform: translateX(0%); }
`

export const AboutContents = styled.div`
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  animation: ${swingDown} 1s forwards;
  animation-fill-mode: forwards;
  position: relative;
  z-index: 10;
  box-shadow: 8px 8px rgba(0, 0, 0, 0.15);
`

[migs540]

@PiotrF your animation keyframe runs twice when google analytics runs:

Request URL:https://www.google-analytics.com/r/collect?v=1&_v=j66&a=1842669742&t=pageview&_s=1&dl=https%3A%2F%2Fpiotrf.pl%2F&dr=https%3A%2F%2Fgithub.com%2Fgatsbyjs%2Fgatsby%2Fissues%2F3067&dp=%2F&ul=en-gb&de=UTF-8&dt=Piotr%20F.%20%E2%80%94%20Product%20designer%20%26%20front-end%20developer%E2%80%94An%20overall%20full-stack%20UX%20design%20specialist&sd=24-bit&sr=1024x1366&vp=1024x1366&je=0&_u=QACAAEAB~&jid=1921053810&gjid=1402211187&cid=1278082317.1511965245&tid=UA-22031199-1&_gid=784946713.1511965245&_r=1&z=209848835
Request Method:GET
Status Code:200
Remote Address:172.217.25.174:443
Referrer Policy:no-referrer-when-downgrade

[piotrfonte]

@migs540 I can confirm that your sample seems to be suffering from the very same issue I’m having. Happens only on the first page load. Once the site’s been cached, it’s ok.

[piotrfonte]

@migs540 I thought it was Google Analytics, then I disabled it but the issue persisted. I now have re-enabled it.

[migs540]

@PiotrF Yes. It was behaving strangely for me which is why I ran up a version of https://github.com/gatsbyjs/gatsby/tree/master/examples/using-gatsby-image at trustingcustomers.com

Keyframes are CSS. So CSS is being run twice? Or part of the DOM is updating triggering CSS again? Not sure how CSS works at the dom / virtual dom level.

Here's the point where the second animation occurs. There's an event load and:

[KyleAMathews]

Well this is bad… it sounds like Gatsby is rendering twice perhaps? What happens if you add a console.log to the render function?

Could one of you create a small reproduction site I could look at? E.g. your using-gatsby-image fork @migs540

[migs540]

@KyleAMathews I created a new repository (because I couldn't work out how to fork just a subsection of gatsbyjs): https://github.com/migs540/debug-animations-using-gatsby-image

That is what is running at http://trustingcustomers.com/

It comes from the original ( https://github.com/gatsbyjs/gatsby/tree/master/examples/using-gatsby-image ) with styled-components added and edits to two files: index.js and blur-up.js - both of these have a one second animation for an enclosing div styled with styled-components.

I haven't added a console.log (don't know where) but am wondering if it has anything to do with manipulating the after initial load? But yes, better to follow the logs / load progress and see what is actually happening.

[KyleAMathews]

Awesome! I should have time in the morning to investigate (if you don't solve it of course while I sleep :-))

[migs540]

@KyleAMathews we all win when you are awake.

In short: animations are executed twice. Once in index.html then a second time in componentindex.js:

I added console logging and can see the render is triggered just once in js (in component---src-pages-index-js-2d6cb1471a0df592f43f.js):

...E=(0,T.keyframes)(f),x=t.AboutContents=k.default.div(d,E),A=function(t){function n(){return(0,o.default)(this,n),(0,i.default)(this,t.apply(this,arguments))}return(0,u.default)(n,t),n.prototype.render=function(){return console.log("IndexComponent triggered me during render"),e.createElement...

class IndexComponent extends React.Component {
  render() {
    console.log("IndexComponent triggered me during render")

but well before that the animation is triggered (presumably from index.html:

public 3Legs$ grep animation index.html 
.iVIEdg{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transform:translateX(-100%);-webkit-animation:cWOgti 1s forwards;animation:cWOgti 1s forwards;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;position:relative;z-index:10;box-shadow:8px 8px rgba(0,0,0,0.15);}
.hzuIAT{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transform:translateX(-100%);-webkit-animation:cWOgti 1s forwards;animation:cWOgti 1s forwards;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;position:relative;z-index:10;box-shadow:8px 8px rgba(0,0,0,0.15);}

Video of behaviour (chrome dev tools) at:

http://trustingcustomers.com/consolelogging.mp4

Note: console logging is not in place in the repo I mention above - and you need to do a gatsby build to see the behaviour (gatsby develop triggers it just once because of the way it serves files locally).

[KyleAMathews]

Thanks for all your research + reproduction @migs540. Only had a brief moment to look at it so far but this is definitely a hydration issue — if you disable JavaScript then it only animates once. So now to see if the hydration problem is generic and needs fixed in core or if it's triggered by certain behaviors in sites.

[KyleAMathews]

The problem with your reproduction site is you have both gatsby-plugin-glamor and gatsby-plugin-styled-components added to the config. This broke the client side hydration causing a complete re-render. When I moved the styled-components stuff into a css file and removed gatsby-plugin-styled-components, things started working as expected.

From 7c26a916063a4d04b856cc76e6a0ac53e7aa3053 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <[email protected]>
Date: Sat, 2 Dec 2017 20:00:42 -0800
Subject: [PATCH] Fix

---
 gatsby-config.js    |   1 -
 package.json        |   1 -
 src/pages/index.css |  13 +++
 src/pages/index.js  |  22 +---
 yarn.lock           | 307 ++++++++++++++++++++++++----------------------------
 5 files changed, 159 insertions(+), 185 deletions(-)
 create mode 100644 src/pages/index.css

diff --git a/gatsby-config.js b/gatsby-config.js
index 55dfd29..90c227a 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -2,7 +2,6 @@ module.exports = {
   plugins: [
     `gatsby-plugin-glamor`,
     `gatsby-plugin-netlify`,
-`gatsby-plugin-styled-components`,
     `gatsby-transformer-sharp`,
     {
       resolve: `gatsby-source-filesystem`,
diff --git a/package.json b/package.json
index 8167420..48dd74b 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,6 @@
     "gatsby-source-filesystem": "^1.5.1",
     "gatsby-transformer-sharp": "^1.6.12",
     "numeral": "^2.0.6",
-    "sharp": "^0.18.4",
     "styled-components": "^2.2.3",
     "typeface-oswald": "^0.0.40",
     "typeface-pt-sans": "^0.0.40",
diff --git a/src/pages/index.css b/src/pages/index.css
new file mode 100644
index 0000000..90f40cd
--- /dev/null
+++ b/src/pages/index.css
@@ -0,0 +1,13 @@
+@keyframes swingDown {
+  100% { transform: translateX(0%); }
+}
+
+.about-div {
+  transform: translateX(-100%);
+  -webkit-transform: translateX(-100%);
+  animation: swingDown 1s forwards;
+  animation-fill-mode: forwards;
+  position: relative;
+  z-index: 10;
+  box-shadow: 8px 8px rgba(0, 0, 0, 0.15);
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index be96fba..2fd39d1 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,30 +2,16 @@ import React from "react"
 import Link from "gatsby-link"
 import Img from "gatsby-image"
 import Navigation from "../components/navigation"
+import "./index.css"
 
 import { rhythm, options } from "../utils/typography"
-import { injectGlobal, css, keyframes } from "styled-components"
-import styled from "styled-components"
-
-const swingDown = keyframes`
-  100% { transform: translateX(0%); }
-`
-
-export const AboutContents = styled.div`
-  transform: translateX(-100%);
-  -webkit-transform: translateX(-100%);
-  animation: ${swingDown} 1s forwards;
-  animation-fill-mode: forwards;
-  position: relative;
-  z-index: 10;
-  box-shadow: 8px 8px rgba(0, 0, 0, 0.15);
-`
 
 class IndexComponent extends React.Component {
   render() {
+    console.log("rendering")
     return (
       <div>
-        <AboutContents>
+        <div className="about-div">
           <Img
             css={{ top: 0, left: 0, right: 0, zIndex: -1 }}
             style={{ position: `absolute` }}
@@ -128,7 +114,7 @@ class IndexComponent extends React.Component {
               </a>
             </p>
           </div>
-        </AboutContents>
+        </div>
       </div>
     )
   }

[migs540]

OK @KyleAMathews - I suspected it had something to do with how i was using styled-components and can see what you've done here. However, I'd like to use styled-components with gatsby. Is it possible to do the same here and drop the glamor plugin (keeping styled-components)? I tried that a short time ago and it failed (but it was only a quick test).

Is it a case of either glamor or styled-components? Or just styled-components?

I'm a big fan of @mxstbr 's styled components and would love to be able to use it on gatsby to render once.

[piotrfonte]

Is that a general gatsby vs. styled-components issue? Asking as I don’t use glamor, yet have the same problem. Unsure what I can do to help, here’s my config if that hint at anything. Otherwise I can create a simple repo you could work with. Let me know @KyleAMathews.

gatsby-config.js

module.exports = {
  siteMetadata: {
    siteUrl: `https://piotrf.pl`,
    title: `piotrf.pl-v2 (2017)`
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-react-next`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages`
      }
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "something"
      }
    },
    {
      resolve: `gatsby-plugin-sitemap`
    },
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1000,
              linkImagesToOriginal: false
            }
          },
          {
            resolve: "gatsby-remark-external-links",
            options: {
              target: "_self",
              rel: "nofollow"
            }
          },
          `gatsby-transformer-sharp`,
          `gatsby-remark-autolink-headers`,
          `gatsby-remark-copy-linked-files`
        ]
      }
    },
    `gatsby-plugin-netlify` // must come in last
  ]
};

[piotrfonte]

@KyleAMathews, I have now create a simple site/repo that you can have a look at: https://priceless-minsky-70fda7.netlify.com/ that gets deployed from https://github.com/piotrf/gatsby-test — any help in solving this flickering mystery much is appreciated.

[sergical]

@KyleAMathews and everyone, resurfacing this as I am having the same issues with my personal site: https://416serg.me/

Plugins I use:

plugins: [
    'gatsby-plugin-react-helmet',
    `gatsby-transformer-sharp`,
    `gatsby-plugin-netlify`,
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'posts',
        path: `${__dirname}/content/${config.blogPostDir}`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 690
            }
          },
          {
            resolve: 'gatsby-remark-responsive-iframe'
          },
          'gatsby-remark-prismjs',
          'gatsby-remark-copy-linked-files',
          'gatsby-remark-autolink-headers'
        ]
      }
    },
    {
      resolve: 'gatsby-plugin-google-analytics',
      options: {
        trackingId: config.googleAnalyticsID
      }
    },
    {
      resolve: 'gatsby-plugin-nprogress',
      options: {
        color: config.themeColor
      }
    },
    'gatsby-plugin-sharp',
    `gatsby-transformer-sharp`,
    'gatsby-plugin-catch-links',
    'gatsby-plugin-twitter',
    'gatsby-plugin-sitemap',
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: config.siteTitle,
        short_name: config.siteTitle,
        description: config.siteDescription,
        start_url: config.pathPrefix,
        background_color: config.backgroundColor,
        theme_color: config.themeColor,
        display: 'minimal-ui',
        icons: [
          {
            src: '/logos/logo-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: '/logos/logo-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    },
    'gatsby-plugin-offline',
    {
      resolve: 'gatsby-plugin-feed',
      options: {
        setup(ref) {
          const ret = ref.query.site.siteMetadata.rssMetadata;
          ret.allMarkdownRemark = ref.query.allMarkdownRemark;
          ret.generator = 'GatsbyJS Material Starter';
          return ret;
        },
        query: `
        {
          site {
            siteMetadata {
              rssMetadata {
                site_url
                feed_url
                title
                description
                image_url
                author
                copyright
              }
            }
          }
        }
      `,
        feeds: [
          {
            serialize(ctx) {
              const rssMetadata = ctx.query.site.siteMetadata.rssMetadata;
              return ctx.query.allMarkdownRemark.edges.map(edge => ({
                categories: edge.node.frontmatter.tags,
                date: edge.node.frontmatter.date,
                title: edge.node.frontmatter.title,
                description: edge.node.excerpt,
                author: rssMetadata.author,
                url: rssMetadata.site_url + edge.node.fields.slug,
                guid: rssMetadata.site_url + edge.node.fields.slug,
                custom_elements: [{ 'content:encoded': edge.node.html }]
              }));
            },
            query: `
            {
              allMarkdownRemark(
                limit: 1000,
                sort: { order: DESC, fields: [frontmatter___date] },
              ) {
                edges {
                  node {
                    excerpt
                    html
                    timeToRead
                    fields { slug }
                    frontmatter {
                      title
                      cover
                      date
                      category
                      tags
                    }
                  }
                }
              }
            }
          `,
            output: config.siteRss
          }
        ]
      }
    }
  ]

[pie6k]

I'm still having this issue, too when using styled-components.

[KyleAMathews]

@pie6k are you using gatsby-plugin-styled-components?

[pie6k]

Yes, I think my issue is related to using it.

[m-allanson]

Maybe this is a rehydration issue?

I took a screen recording of Chrome's animation inspector running on @PiotrF's repro site: https://www.dropbox.com/s/h8nsguy5p8dzonl/issue-3067-animation-flicker.mov?dl=0

It shows the animations running twice. The class names on the animated items change between the first animation and the second animation. In the second animation, hovering the highlighted divs will highlight them in the page. For the first animation that doesn't happen, as the divs no longer exist.

Could the styled components plugin be generating different classnames during the SSR phase and the browser phase? This might then cause React to re-render the page using the new class names, which is retriggering the animations?

[m-allanson]

Should gatsby-plugin-styled-components be using the Styled Components babel plugin? https://www.styled-components.com/docs/tooling#serverside-rendering

[malekjaroslav]

I have the same problem

[markelog]

@KyleAMathews is there any way to use styled components with the current state of things?

[KyleAMathews]

@markelog Lots of people are using styled-components successfully — what problems are you seeing?

[markelog]

Exact same issue described in the ticket - page is rerendered and assets are redownloaded :/. I suppose it’s not that directly noticeable if you don’t have animation, but it’s there Regards, Oleg

…

On 25 Mar 2018, at 23:10, Kyle Mathews ***@***.***> wrote: @markelog Lots of people are using styled-components successfully — what problems are you seeing? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[KyleAMathews]

It does sound like several people are having trouble with gatsby-plugin-styled-components — @m-allanson's guess that it has something to do with the babel plugin not being included seems plausible.

@markelog would you like to try adding the SC babel plugin to the gatsby plugin to see if that fixes things?

You can setup a development environment using the instructions here https://www.gatsbyjs.org/docs/how-to-contribute/

You'd add the SC babel plugin like we do for Glamor

gatsby/packages/gatsby-plugin-glamor/src/gatsby-node.js

Line 12 in 958b76d

exports.modifyBabelrc = ({ babelrc }) => {

[markelog]

Can’t promise I will be productive, since I usually limited with my time. But I will do my best :) Regards, Oleg

…

On 26 Mar 2018, at 00:31, Kyle Mathews ***@***.***> wrote: It does sound like several people are having trouble with gatsby-plugin-styled-components — @m-allanson's guess that it has something to do with the babel plugin not being included seems plausible. @markelog would you like to try adding the SC babel plugin to the gatsby plugin to see if that fixes things? You can setup a development environment using the instructions here https://www.gatsbyjs.org/docs/how-to-contribute/ You'd add the SC babel plugin like we do for Glamor https://github.com/gatsbyjs/gatsby/blob/958b76de9f779f32406bcc7dffca6e2312155c43/packages/gatsby-plugin-glamor/src/gatsby-node.js#L12 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[KyleAMathews]

Actually... lemme just fix this. The plugin is really widely used and it'll only take me a sec to add the babel plugin. Thanks for offering!

[KyleAMathews]

Put up the PR #4722

Once the tests pass & I release it, you'll just need to upgrade to the latest gatsby-plugin-styled-components and install babel-plugin-styled-components into your project.

[markelog]

Nice! Thank you :) Regards, Oleg

…

On 27 Mar 2018, at 01:06, Kyle Mathews ***@***.***> wrote: Put up the PR #4722 Once the tests pass & I release it, you'll just need to upgrade to the latest gatsby-plugin-styled-components and install babel-plugin-styled-components into your project. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[piotrfonte]

Thanks for the effort @KyleAMathews. This did not do the trick for me. Stuff still flickers: https://priceless-minsky-70fda7.netlify.com/ Here’s the source, if anyone wants to help out nailing this down: https://github.com/piotrf/gatsby-test

[breadadams]

Yeah @m-allanson, also installed babel-plugin-styled-components, and no explicit babel config for the project is set/created.

I've just updated gatsby to @latest & deployed the results of build --no-uglify here, @KyleAMathews.

We've also got a few other gatsby plugins installed (ie. gatsby-plugin-offline, gatsby-plugin-manifest, etc). However just done a test-run removing all plugins except gatsby-plugin-react-helmet & gatsby-plugin-styled-components and the issue is still present.

[KyleAMathews]

So there's nothing in the console?

[breadadams]

Would appear so @KyleAMatthews, all I saw were some service worker & A-frame related messages that are present in our other build too.

…

On 26 Apr 2018, at 07:45, Kyle Mathews ***@***.***> wrote: So there's nothing in the console? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[JoaoTMDias]

I'm also facing the same issue.
So using only css keyframes (not styled components) temporarily fixes the issue?

[m-allanson]

@PiotrF I tried looking into this again, using the repo you posted earlier. Running gatsby develop I see some errors in the browser console. Any chance you could fix those up?

Or if anyone has source for a simple demo site that replicates this problem and uses babel-plugin-styled-components then please post it here.

[breadadams]

@m-allanson the repo for the project I'm linking to is currently over on GitLab - hope that helps 🙂

(It's still in baby steps, recently born from the starter - as you'll be able to tell from the package.json 🙈)

[m-allanson]

Thanks @breadadams, that does help!

I've created a test version of your site - stripping out the bits that aren't related to this issue.

Repo: https://github.com/m-allanson/test-gatsby-animation
Live URL: http://festive-hermann-722eab.netlify.com/

This looks like the server generated classnames are different from the browser rendered classnames. You can see this by running the site with or without JS enabled.

With JS - notice animation being retriggered just after the page loads:

Without JS - the animation runs smoothly:

The With JS demo it looks like the page loads with the server generated classnames, then they get changed by the client, causing the animations to restart. In the Without JS demo, only the server generated classnames are being used and the animation just runs once.

If anyone can work out why there's a difference between the server and client side classnames, that should hopefully solve this issue.

[breadadams]

Awesome @m-allanson!! Looking thru the src for gatsby-plugin-styled-components I noticed something possibly related. The config is returned twice based on a conditional, once with ssr: true and the other without:

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-styled-components/src/gatsby-node.js

[m-allanson]

If you wanted to try some debugging, you could copy the plugin source as a local plugin and play around with it.

For a more in-depth setup checkout the instructions for using gatsby-dev.

[breadadams]

Thanks, will do. Here's a possible related issue I've come across: vercel/next.js#3706

[KyleAMathews]

@breadadams the reason it's returned twice is we added support for the babel plugin recently and to avoid having to do a major release due to a breaking change, we check if the plugin is installed before adding it. If you haven't added the babel plugin, that could be the problem.

[JoaoTMDias]

Installing babel-plugin-styled-components did it for me! Thanks!

[breadadams]

we check if the plugin is installed before adding it

Yeah @KyleAMathews I get that, but both the returns I mention are within the if (babelPluginExists) { statement. They're split by the if (stage === 'build-html') { conditional.

We have babel-plugin-styled-components installed, exactly like in the demo repo that @m-allanson created.

Did you literally just install the babel plugin @JoaoTMDias? Or also include it in your .babelrc?

[sten-squad]

Hi everyone, just wanted to confirm that I had the same flickering issue with styled-components and it was fixed after updating gatsby-plugin-styled-components and adding babel-plugin-styled-components by adding a .babelrc file at the root of the repo (and installing it via NPM of course).

I really love Gatsby, thanks for making it awesome!

[thundernixon]

Just in case anyone else comes across this thread, like I did, from getting the errors:

ReferenceError: keyframes is not defined (in Gatsby v1)

or

error 'keyframes' is not defined no-undef (in Gatsby v2)

...you might simply need to add an import for { keyframes } to your styled import. That is, the top of the component should have this import statement:

import styled, { keyframes } from 'styled-components'

This is probably completely obvious to developers used to React, but it took me way too long to figure out. 😄I hope this doesn't feel like clutter in the overall thread; I just don't really know where else makes sense for this, as Google brought me to this thread and I tried to other solutions in vain (because my problem was simpler). Hope this helps someone!

[marcneander]

I'm still having this problem after trying local .babelrc.js. Anyone solved it yet?

Reproduce:
Clone https://github.com/marcneander/marcneander.se
yarn install && yarn build && yarn serve

[macguirerintoul]

I'm having the same issue at https://mrintoul.com/, although it doesn't happen when the page is loaded — it happens every time I hover over a link (perhaps every time something is eager loaded?). I believe I've tried all the recommendations in this thread and a few others, but no luck. It only happens after build, not while using gatsby develop. I'm also using styled-components. I don't know enough about React/Gatsby to figure it out on my own, but I appreciate all the effort put into this issue.

I've made the repository public for now, if anyone has a chance to verify it's not my implementation error. It's deployed on Netlify.

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

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

[breadadams]

Will try to get our site's dependencies updated to latest versions and give this another test... Please don't close yet 🙏

[jure]

@breadadams any luck with the latest versions?

[wardpeet]

Hey all, i'm going to close this one as it's pretty old. Please create a new ticket with new information and reproduction if possible.

Thanks for using Gatsby and your understanding!