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.

Hot reload does not work with linaria

See original GitHub issue

Description

Hot reload does not work with https://github.com/callstack/linaria since 2.24.9

Related issues:

Steps to reproduce

Demo project: https://github.com/hartshorne/hot-reload-repro

Using a linaria class, like https://github.com/hartshorne/hot-reload-repro/blob/master/src/pages/index.js:

import React from "react"
import { Link } from "gatsby"

import { css } from "linaria"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const styles = {
  superClass: css`
    color: red;
  `,
}

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <h1 className={styles.superClass}>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <Image />
    </div>
    <Link to="/page-2/">Go to page 2</Link> <br />
    <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
  </Layout>
)

export default IndexPage

Expected result

Hot reload should work.

Actual result

Hot reload does not work.

Environment

% ./node_modules/.bin/gatsby info --clipboard                                                                                                                         (git)-[master] 

  System:
    OS: macOS 10.15.7
    CPU: (56) x64 Intel(R) Xeon(R) W-3275M CPU @ 2.50GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.14.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Languages:
    Python: 3.8.3 - /usr/local/Caskroom/miniconda/base/bin/python
  Browsers:
    Chrome: 86.0.4240.111
    Firefox: 80.0.1
    Safari: 14.0
  npmPackages:
    gatsby: ^2.24.85 => 2.24.85
    gatsby-image: ^2.4.21 => 2.4.21
    gatsby-plugin-linaria: ^2.1.0 => 2.1.0
    gatsby-plugin-manifest: ^2.4.35 => 2.4.35
    gatsby-plugin-offline: ^3.2.37 => 3.2.37
    gatsby-plugin-react-helmet: ^3.3.14 => 3.3.14
    gatsby-plugin-sharp: ^2.6.43 => 2.6.43
    gatsby-source-filesystem: ^2.3.35 => 2.3.35
    gatsby-transformer-sharp: ^2.5.19 => 2.5.19

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:18 (13 by maintainers)

Top GitHub Comments

1reaction

vladarcommented, Jan 5, 2021

Sorry for the late reply - it just requires some time and prioritization. It is still about webpack watching suspend and resume coordination.

Just needs more debugging to find another cause (there were apparently several distinct causes).

0reactions

LekoArtscommented, Feb 1, 2022

Hi!

I’m closing this as a stale issue as in the meantime Gatsby 4 and related packages were released. You can check our Framework Version Support Page to see which versions currently receive active support. If this is a feature request, please create a discussion as we moved feature requests from issues to GitHub Discussions.

Please try the mentioned issue on the latest version (using the next tag) and if you still see this problem, open a new bug report. It must include a minimal reproduction.

Thanks!