Preact-cli: reloading page after hotreloading css

Created on 16 Dec 2019 · 10Comments · Source: preactjs/preact-cli

Do you want to request a _feature_ or report a _bug_?
bug report

What is the current behaviour?
When only changing css in the project it first hotreloads the project, then hits a 404 and reloads the page

If the current behaviour is a bug, please provide the steps to reproduce.

run npm run dev
change only css
see it hotreload css
instantly followed by the entire page reloading
if you got "preserve log" enabled in the console you'll see there was a 404

What is the expected behaviour?
For it to only hotreload css

Please paste the results of preact info here.

Environment Info:

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-3770K CPU @ 3.50GHz
  Binaries:
    Node: 10.16.3 - C:\Program Files\nodejs\node.EXE
    npm: 6.10.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    preact: ^10.1.0 => 10.1.0
    preact-cli: ^3.0.0-rc.6 => 3.0.0-rc.6
    preact-compat: ^3.19.0 => 3.19.0
    preact-render-to-string: ^5.1.2 => 5.1.2
    preact-router: ^3.1.0 => 3.1.0

Source

AEnterprise

Most helpful comment

This is coming from --esm.
For immediate fix please use `--no-esm with watch.

@developit @ForsakenHarmony is it ok if watch work without esm?

prateekbh on 23 Jan 2020

👍2

All 10 comments

I tried the steps couldn't reproduce the bug.

Can you try in a fresh repo and confirm if it happens there as well?

prateekbh on 17 Dec 2019

i can repro with:

run commands:

npm install -g preact-cli@rc
preact create default test
cd test

then rename index.css to index.scss
go into the index.js and replace the css import to import './style/index.scss';
then

npm install --save-dev node-sass [email protected]
npm run dev

go to localhost:8080 in browser (used chrome)
open dev tools, go into console settings, enable "preserve log"
change something in the css (like height to 50% instead of 100%) and save the file
go back to page and dev tools
see 404 and page reload in dev tools