Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

data hot reloading breaks when using `gatsby-plugin-transition-link`

See original GitHub issue

Description

Hi, I’m having issues with page templates not hot reloading. I have them wrapped with a layout component in gatsby-browser.js. The layout component updates just fine, but pages don’t. I tried wrapping my template files with React.memo—didn’t work.

Steps to reproduce

Here’s the repo I’m working on: https://github.com/storycopter/storycopter-idoc

run the site with gatsby develop
open localhost:8000
edit src/essentials/home.json
save changes

Expected result

Page should hot load on file save and new data should surface in the UI.

Actual result

Layout component console.log returns updated data, Pages do not.

Environment

System:
    OS: macOS 10.15.4
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.11.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.7 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 81.0.4044.129
    Firefox: 75.0
    Safari: 13.1
  npmPackages:
    gatsby: 2.21.5 => 2.21.5
    gatsby-cli: 2.12.5 => 2.12.5
    gatsby-image: 2.4.0 => 2.4.0
    gatsby-link: 2.4.0 => 2.4.0
    gatsby-plugin-material-ui: 2.1.8 => 2.1.8
    gatsby-plugin-react-helmet: 3.3.0 => 3.3.0
    gatsby-plugin-sharp: 2.6.0 => 2.6.0
    gatsby-plugin-styled-components: 3.3.0 => 3.3.0
    gatsby-plugin-transition-link: 1.18.0 => 1.18.0
    gatsby-react-router-scroll: 2.3.0 => 2.3.0
    gatsby-source-filesystem: 2.3.0 => 2.3.0
    gatsby-transformer-json: 2.4.0 => 2.4.0
    gatsby-transformer-sharp: 2.5.0 => 2.5.0
  npmGlobalPackages:
    gatsby-cli: 2.11.15

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:5 (4 by maintainers)

Top GitHub Comments

1reaction

piehcommented, Apr 30, 2020

I found https://github.com/TylerBarnes/gatsby-plugin-transition-link/issues/131 which seems like it might be same case as here.

I think the reason why Layout (added with wrapPageElement) have data hot reloading still working is because it ends up above wrappers that gatsby-plugin-transition-link add in component tree.

0reactions

danabritcommented, May 29, 2020

Closing, as this issue appears resolved. Please reopen with current status information if that is not the case.

Top Results From Across the Web

Fast Refresh | Gatsby

Fast Refresh is an implementation of Hot Reloading with full support from React. It replaces unofficial solutions like react-hot-loader . With Fast Refresh ......

Error 11903 when developing first gatsby project

I just tried. I tried developing it with both gatsby develop and npm run develop and the latter worked ( gatsby develop is...

Gatsby Changelog | 5.3.0

Now, when a code update or data update is made for the <Header> component, only the HTML for the Slice will be updated,...

Gatsby losing/disappearing CSS on page refresh?-Reactjs

After looking at your site's html, the issue is the template of your new page, that does not have the style tag. Explanation....

3 Gatsby plugins to check out - Roboto Studio

We wished we knew about this little gem. It essentially allows you to achieve everything you can achieve in a React helmet component,...