Hot reload does not work with linaria

[hartshorne]

Description

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

Related issues:

• Browser won't hot reload re-compiled sources, broken after gatsby@2.24.9 #26192
• Hot reload doesn't re-run page query until I save twice #26580
• Hot reloading doesn't work with Gatsby when files are separated callstack/linaria#682
• HMR Not reloading latest changes, but previous to latest callstack/linaria#642

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

[hartshorne]

@cometkim have you noticed any hot reload issues when using https://github.com/cometkim/gatsby-plugin-linaria?

[cometkim]

@hartshorne just published a new version and tested it with linaria v2, gatsby v2.24.85 on Ubuntu 20.04

Hot reloading works but syncs one step later. Seems It has the same issue with the #26580

[hartshorne]

@cometkim right, so with your updates, i still see the same issue where i have to save twice before hot reload will work. it looks like someone added timing to the verbose logs, this is what i see now:

Start server:

success Building development bundle - 12.634s
verbose 22.415385347 Transition to "waiting"

Save index.tsx:

verbose 45.034601278 Transition to "waiting" > "aggregatingFileChanges"
verbose 45.036081595 Webpack file changed: /repo/src/pages/index.tsx
verbose 45.240912414 Transition to "runningQueries"
success onPreExtractQueries - 0.003s
success extract queries from components - 0.122s
verbose 45.371298018 Transition to "runningQueries" > "waitingPendingQueries"
verbose 45.433578313 Transition to "runningQueries" > "writingRequires"
success write out requires - 0.007s
verbose 45.435475361 Transition to "runningQueries" > "calculatingDirtyQueries"
verbose 45.435852005 Transition to "runningQueries" > "runningStaticQueries"
verbose 45.436153456 Transition to "runningQueries" > "runningPageQueries"
verbose 45.43675985 Transition to "runningQueries" > "waitingForJobs"
verbose 45.437025825 Transition to "runningQueries" > "done"
verbose 45.445833323 Transition to "recompiling"
success Re-building development bundle - 0.840s
verbose 46.300981738 Webpack file changed: /repo/.linaria-cache/src/pages/index.linaria.css
verbose 46.311907143 Transition to "waiting"

(Server frozen, hot reload does not work.)

Save index.tsx (again):

verbose 48.895659769 Transition to "waiting" > "aggregatingFileChanges"
verbose 49.098851656 Transition to "runningQueries"
success onPreExtractQueries - 0.001s
success extract queries from components - 0.094s
verbose 49.202130174 Transition to "runningQueries" > "waitingPendingQueries"
verbose 49.26104642 Transition to "runningQueries" > "writingRequires"
success write out requires - 0.005s
verbose 49.262298747 Transition to "runningQueries" > "calculatingDirtyQueries"
verbose 49.262552784 Transition to "runningQueries" > "runningStaticQueries"
verbose 49.262771321 Transition to "runningQueries" > "runningPageQueries"
verbose 49.263036549 Transition to "runningQueries" > "waitingForJobs"
verbose 49.263218811 Transition to "runningQueries" > "done"
verbose 49.264684053 Transition to "recompiling"
success Re-building development bundle - 0.453s
verbose 49.737394093 Transition to "waiting"

New changes finally loaded in browser.

[lucis]

For me it's a bit different...

I already have linaria, gatbsy-plugin-linaria and gatsby as its latest versions, and, even if I save my style changes twice it doesn't get updated (I'm using the styled approach).

What's odd (and a bit annoying) is that if I 1) change one style property 2) change something on the JSX part, both updates get to browser right-away.

[arunagri82]

using reloads

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 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.
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 for being a part of the Gatsby community! 💪💜

[hartshorne]

Still broken!

[vladar]

Can you please check if gatsby@2.27.2 fixes it for you? There is one fix to HMR there - #28237. It is likely unrelated to this issue but worth checking.

[hartshorne]

Thank you, @vladar. I've upgraded the repro repo (https://github.com/hartshorne/hot-reload-repro) to gatsby@2.27.2:
https://github.com/hartshorne/hot-reload-repro/commit/1f261680b6539c3c20860a8242f7ad406560ef15

To test, I change color: green; to color: red; and back on index.js. Hot reload seems to work about 80% of the saves now. Sometimes this message sometimes turns up in the logs:

warning Warning: Event "xstate.after(200)#waitingMachine.aggregatingFileChanges" was sent to stopped service "waitingMachine". This service has already reached its final state, and will not transition.
Event: {"type":"xstate.after(200)#waitingMachine.aggregatingFileChanges"}

Have you had a look at the way gatsby-plugin-linaria integrates with webpack? Anything seem suspicious here: https://github.com/cometkim/gatsby-plugin-linaria/blob/master/src/gatsby-node.ts

[vladar]

Sorry for the stupid question: 80% is better than it was before or not? 😅

Also, can you post the full console output with the new version (with --verbose flag)?

[hartshorne]

@vladar previously it'd work on every other save -- now it works/breaks less consistently.

have you tried editing index.js in my repro repo? it's pretty minimal: git clone git@github.com:hartshorne/hot-reload-repro.git

here's an example where things broke:

% yarn install && GATSBY_HOT_LOADER=fast-refresh yarn develop --verbose                                                                                        (git)-[master] 
yarn install v1.22.10
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.54s.
yarn run v1.22.10
$ gatsby develop --verbose --verbose
verbose 1.129331417 set gatsby_log_level: "verbose"
verbose 1.130693273 set gatsby_executing_command: "develop"
verbose 1.131145259 loading local command from: /Users/beau/Desktop/hot-reload-repro/node_modules/gatsby/dist/commands/develop.js
verbose 1.193887056 running command: develop
verbose 1.727249793 Transition to "initializing"
success open and validate gatsby-configs - 0.014s
success load plugins - 0.406s
success onPreInit - 0.022s
success initialize cache - 0.004s
success copy gatsby files - 0.041s
success onPreBootstrap - 0.010s
verbose 2.336599425 Transition to "initializingData"
success createSchemaCustomization - 0.004s
verbose 2.341256325 Transition to "initializingData" > "sourcingNodes"
verbose 2.377453337 Checking for deleted pages
verbose 2.377909196 Deleted 0 pages
verbose 2.378006346 Found 0 changed pages
success Checking for changed pages - 0.000s
success source and transform nodes - 0.038s
verbose 2.379871523 Transition to "initializingData" > "buildingSchema"
success building schema - 0.205s
verbose 2.586112727 Transition to "initializingData" > "creatingPages"
info Total nodes: 35, SitePage nodes: 1 (use --verbose for breakdown)
verbose 2.586553679 Number of node types: 7. Nodes per type: SitePage: 1, SitePlugin: 27, Site: 1, SiteBuildMetadata: 1, Directory: 1, File: 2, ImageSharp: 2
success createPages - 0.001s
verbose 2.587105329 Checking for deleted pages
verbose 2.587232355 Deleted 0 pages
verbose 2.587476748 Found 0 changed pages
success Checking for changed pages - 0.000s
verbose 2.588679934 Transition to "initializingData" > "creatingPagesStatefully"
success createPagesStatefully - 0.042s
verbose 2.631414402 Transition to "initializingData" > "rebuildingSchemaWithSitePage"
success update schema - 0.018s
verbose 2.649954149 Transition to "initializingData" > "writingOutRedirects"
success write out redirect data - 0.001s
verbose 2.650857934 Transition to "initializingData" > "done"
verbose 2.65189251 Transition to "runningPostBootstrap"
success Build manifest and related icons - 0.096s
success onPostBootstrap - 0.098s
info bootstrap finished - 2.750s
verbose 2.752621547 Transition to "runningQueries"
success onPreExtractQueries - 0.001s
success extract queries from components - 0.248s
verbose 3.006163177 Transition to "runningQueries" > "waitingPendingQueries"
verbose 3.05895327 Transition to "runningQueries" > "writingRequires"
success write out requires - 0.003s
verbose 3.061543893 Transition to "runningQueries" > "calculatingDirtyQueries"
verbose 3.061974089 Transition to "runningQueries" > "runningStaticQueries"
verbose 3.091295776 Transition to "runningQueries" > "runningPageQueries"
success run page queries - 0.045s - 2/2 44.81/s
verbose 3.108242133 Transition to "runningQueries" > "waitingForJobs"
verbose 3.108497561 Transition to "runningQueries" > "done"
verbose 3.111113669 Transition to "startingDevServers"
⠀
You can now view gatsby-starter-default in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 3.587s
verbose 6.710053794 Transition to "waiting"
verbose 23.007797995 Transition to "waiting" > "aggregatingFileChanges"
verbose 23.008965947 Webpack file changed: /Users/beau/Desktop/hot-reload-repro/src/pages/index.js
verbose 23.216939212 Transition to "runningQueries"
success onPreExtractQueries - 0.008s
success extract queries from components - 0.035s
verbose 23.274181769 Transition to "runningQueries" > "waitingPendingQueries"
verbose 23.329841651 Transition to "runningQueries" > "writingRequires"
success write out requires - 0.002s
verbose 23.331074961 Transition to "runningQueries" > "calculatingDirtyQueries"
verbose 23.331416253 Transition to "runningQueries" > "runningStaticQueries"
verbose 23.331692355 Transition to "runningQueries" > "runningPageQueries"
verbose 23.332193175 Transition to "runningQueries" > "waitingForJobs"
verbose 23.332424737 Transition to "runningQueries" > "done"
verbose 23.340808508 Transition to "recompiling"
success Re-building development bundle - 0.223s
verbose 23.560399368 Webpack file changed: /Users/beau/Desktop/hot-reload-repro/.linaria-cache/src/pages/index.linaria.css
verbose 23.564825099 Transition to "waiting"
verbose 23.767123152 Transition to "runningQueries"
success onPreExtractQueries - 0.001s
success extract queries from components - 0.037s
verbose 23.806801328 Transition to "runningQueries" > "waitingPendingQueries"
verbose 23.861802337 Transition to "runningQueries" > "writingRequires"
success write out requires - 0.001s
verbose 23.862951446 Transition to "runningQueries" > "calculatingDirtyQueries"
verbose 23.86324757 Transition to "runningQueries" > "runningStaticQueries"
verbose 23.863502717 Transition to "runningQueries" > "runningPageQueries"
verbose 23.863842059 Transition to "runningQueries" > "waitingForJobs"
verbose 23.864069929 Transition to "runningQueries" > "done"
verbose 23.867334508 Transition to "recompiling"
success Re-building development bundle - 0.267s
verbose 24.142401215 Transition to "waiting"
warning Warning: Event "xstate.after(200)#waitingMachine.aggregatingFileChanges" was sent to stopped service "waitingMachine". This service has already reached its final state, and will not transition.
Event: {"type":"xstate.after(200)#waitingMachine.aggregatingFileChanges"}
verbose 32.524112855 Transition to "waiting" > "aggregatingFileChanges"
verbose 32.524727706 Webpack file changed: /Users/beau/Desktop/hot-reload-repro/src/pages/index.js
verbose 32.725437824 Transition to "runningQueries"
success onPreExtractQueries - 0.001s
success extract queries from components - 0.021s
verbose 32.74867245 Transition to "runningQueries" > "waitingPendingQueries"
verbose 32.800383753 Transition to "runningQueries" > "writingRequires"
success write out requires - 0.001s
verbose 32.803230971 Transition to "runningQueries" > "calculatingDirtyQueries"
verbose 32.803525898 Transition to "runningQueries" > "runningStaticQueries"
verbose 32.803774625 Transition to "runningQueries" > "runningPageQueries"
verbose 32.804094615 Transition to "runningQueries" > "waitingForJobs"
verbose 32.804323552 Transition to "runningQueries" > "done"
verbose 32.805971302 Transition to "recompiling"
success Re-building development bundle - 0.064s
verbose 32.875946711 Transition to "waiting"

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 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.
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 for being a part of the Gatsby community! 💪💜

[hartshorne]

Still broken! Anything I can do to help narrow it down?

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 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.
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 for being a part of the Gatsby community! 💪💜

[vladar]

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).

[vladar]

Can you try it with gatsby@3.0.0-next.5 (which includes webpack bump)?

[vladar]

I've opened a PR #30194 that can potentially fix this. You can try it with gatsby@3.1.0-alpha-hmr-fix.16+831f9a9d64 canary and let us know if it helps.

[LekoArts]

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!