CSS replacement doesn't work

[geotre]

If I run "gulp watch" and then edit any of the SCSS files, the edits do not come through until a cjsx file is edited

[KyleAMathews]

That's strange. Any luck debugging it?

[geotre]

the steps to replicate this are:

cd /tmp/
git clone git@github.com:KyleAMathews/coffee-react-quickstart.git
cd coffee-react-quickstart/
npm install
bundle install
gulp watch

then I open localhost:8080 in a browser window (firefox) and the console prints this:

"[HMR] Waiting for update signal from WDS..." only-dev-server.js:68:2
"[WDS] Hot Module Replacement enabled."

then I edit src/styles/main.scss, and append "body { background: red }" to the file. The change does show up in the browser, and the browser console prints this:

"[WDS] App updated. Recompiling..." client:19:2
"[WDS] App hot update..." client:65:3
"[HMR] Checking for updates on the server..." only-dev-server.js:63:5
"[HMR] Updated modules:" log-apply-result.js:20:3
"[HMR]  - 250" log-apply-result.js:22:4
"[HMR] App is up to date."

which is great. But now if I open the same file, and change "red" to "blue", I get this:

"[WDS] App updated. Recompiling..." client:19:2
"[WDS] Nothing changed."

and the browser does not update the CSS. Any further changes do not update the browser.

It seems that only the first change is picked up, though I'm not sure why. Where would be best to start with debugging this?

[KyleAMathews]

Are changes to coffeescript files also not being picked up?

[geotre]

Live editing .cjsx files works 100%

On Tue, 21 Jul 2015 19:20 Kyle Mathews notifications@github.com wrote:

Are changes to coffeescript files also not being picked up?

— Reply to this email directly or view it on GitHub https://github.com/KyleAMathews/coffee-react-quickstart/issues/26#issuecomment-123424962 .

[KyleAMathews]

If you stop gulp and start it again does the same problem happen?

[KyleAMathews]

Not sure what's happening then actually... I moved to a pure inline-styles CSS approach a while ago so haven't played with this code recently.

[geotre]

if I halt the gulp process and restart it, the browser console does this:

"[WDS] Hot Module Replacement enabled." client:15:2
"[WDS] App hot update..." client:65:3
"[HMR] Checking for updates on the server..." only-dev-server.js:63:5
http://localhost:8080/bcd1c9d1ec93a88829b0.hot-update.json [HTTP/1.1 404 Not Found 3ms]
"[HMR] Cannot find update. Need to do a full reload!" only-dev-server.js:24:5
"[HMR] (Probably because of restarting the webpack-dev-server)"

if I reload the browser then the change does appear. Any further changes do not.

Does it work for you? I had a look through the commit history but couldn't find where you switched over to inline CSS.

[geotre]

after a bit of digging around and adding extra logging to node_modules/webpack-dev-server/client/index.js I found that the dev-server does not emit new hashes when only CSS has changed.

I then looked in node_modules/webpack-dev-server/lib/Server.js and edited line 246 to remove return socket.emit("still-ok"). This forces it to send the hash to the browser each time, but unfortunately it is sending the same hash each time, so the app is not reloading.

I overrode the hash in node_modules/webpack/lib/Stats.js by adding compilation.hash = Math.random().toString(); on line 8. This forced the browser to hot load on CSS changes, but it would get a 404 for these requests:

http://localhost:8080/c0f731756eea35fd62da.hot-update.json

So I guess when it's generating the CSS it's not hashing the ./public/main.css file correctly. Not sure where to go from here.

[geotre]

It appears that if you leave some time between changes, ~1minute, they are loaded. The only time setting I could find in the configs is watchDelay: 100 but that doesn't seem to affect it (and it's also to short to be the reason).

[geotre]

it appears the problem is with the recent version of webpack-dev-server deprecating watchDelay in favor of watchOptions. The pull request above fixes this problem.

[KyleAMathews]

Closed by #28