Linaria: Hot reload not working properly

[zaguiini]

Environment

MacOS Catalina;
Create React App;
TypeScript.

Description

Sometimes -- meaning it's intermittent --, hot reload fails to work.

Reproducible Demo

https://github.com/zaguiini/linaria-sandbox

Try starting and changing the background-color from the Title component. Save and check if it changes in the browser. It's intermittent. If it does work, try quitting the dev server and starting again. Sometimes it doesn't display the React tree on start too, and a refresh in the browser is needed to show the elements. Not sure why tho...

Additional information

For some reason it does work if I remove .linaria_cache folder every time I start the dev server... Try adding a prestart script to something like rm -rf src/.linaria_cache

[resolritter]

First of all, I could not even run your app as it is due to this bug (also appears here). CRA is bloated with a bunch of compilation switches and hidden webpack configuration, so it's not the best way to reproduce a particular package's issue, IMO.

But anyway, when I finally got to run the app, I could reproduce this reliably

Sometimes it doesn't display the React tree on start too, and a refresh in the browser is needed to show the elements

1. rm -rf src/.linaria-cache/ (this is the cause)
2. yarn start
3. Wait for the browser to open; the first render will be blank
4. Reload the page and now it'll display the app.

i.e. if the src/.linaria-cache/ wasn't created already on my end, the first app's render would be blank.

HOWEVER, if you tell CRA to not open the browser on startup with:

-   "start": "node scripts/start.js",
+   "start": "BROWSER=none node scripts/start.js",

i.e. wait for the build to start, then load up the URL manually, the render will occur normally even in the first time.

---

Past that, about the second half of your issue, I couldn't reproduce

Try starting and changing the background-color from the Title component. Save and check if it changes in the browser.

It worked reliably every time when running with yarn start. Perhaps you're hitting some other error in your build and that stops the app from reloading?

[zaguiini]

First of all, I could not even run your app as it is due to this bug (also appears here). CRA is bloated with a bunch of compilation switches and hidden webpack configuration, so it's not the best way to reproduce a particular package's issue, IMO.

That's my use case. I'm using CRA as a starting point for a project. I don't think it should interfere as this is a library and it should interop with everything inside the ecosystem.

Past that, about the second half of your issue, I couldn't reproduce

That only happens if you don't remove the .linaria_cache folder and run yarn start normally with the browser opening automatically.

[resolritter]

That's my use case. I'm using CRA as a starting point for a project. I don't think it should interfere as this is a library and it should interop with everything inside the ecosystem.

Ah, okay. I thought you needed more setup to use Linaria with CRA (see craco-linaria).

[Anber]

The main problem with HMR has been solved, but there is still a problem with a blank page on a first run. I've found that a blank page appears because Webpack reports that a compilation is successfully finished before it actually starts processing generated CSS-files.

[jayu]

Since the main issue with Hot reload has been solved, I'm closing it in favor of #584