sveltejs/template

Browser doesn't pick up code changes

rlaferla opened this issue · 10 comments

rlaferla commented

Description:

Browser is somehow caching the bundle.js. In Chrome dev tools, when I click on a .svelte class in an error message, it shows me an older version of the class.

Environment:

Browser: Chrome 77.0.3865.120 (Official Build) (64-bit)
OS: macOS Mojave 10.14.6 (18G103)

I am using the "dev" target for yarn/npm:

"dev": "run-p start:dev autobuild",

Severity:

This is blocking my development w/Svelte.

rlaferla commented

Could this be the issue? bundle.css has a ?livereload but bundle.js doesn't. Therefore the browser may be caching it.

rollup v1.24.0
bundles src/main.js → public/bundle.js...
LiveReload enabled
created public/bundle.js in 553ms

[2019-10-16 12:35:31] waiting for changes...
  [12:35:31] 200 ─ 3.19ms ─ /bundle.css?livereload=1571243731960
  [12:35:31] 200 ─ 0.43ms ─ /
  [12:35:32] 200 ─ 1.29ms ─ /bundle.js
  [12:35:34] 200 ─ 0.41ms ─ /
  [12:35:34] 200 ─ 1.18ms ─ /favicon.png

Alternatively, perhaps the latest Chrome has a bug w/detecting changes in the timestamp??

rlaferla commented

Changing the port from 5000 to 5001 in package.json caused the browser to pick up the changes so there is definitely a caching issue.

{
  "name": "svelte-app",
  "version": "1.0.0",
  "devDependencies": {
    "npm-run-all": "^4.1.5",
    "rollup": "^1.12.0",
    "rollup-plugin-commonjs": "^10.0.0",
    "rollup-plugin-livereload": "^1.0.4",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^4.0.4",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "query-string": "^6.8.3",
    "sirv-cli": "^0.4.4",
    "svelte-routing": "^1.4.0"
  },
  "scripts": {
    "build": "rollup -c",
    "autobuild": "rollup -c -w",
    "dev": "run-p start:dev autobuild",
    "start": "sirv public --single",
    "start:dev": "sirv public --single --dev --port=5001"
  }
}
tanhauhau commented

Probably you might want to consider disabling cache in your browser like https://stackoverflow.com/a/23944114/1513547

rlaferla commented

I disabled my cache but the browser is still caching my .svelte files.
image

I also tried a empty cache and hard reload:

image

perhaps there is a build issue?

oren commented

I am having the same issue on Firefox 70.0 (64-bit) on Ubuntu. I even disabled browser.cache.disk.enable and browser.cache.memory.enable but I am not seeing my updates. The browser update itself only after the first code change. Any other change is being ignored and I have to rerun `npm run dev'.

oren commented

I just tested on Firefox incognito mode and the issue persist.
Also, I am on Ubuntu 16.04.6 LTS.

oren commented

Update: it's not the browser since the console doesn't change at all. Not sure how to troubleshoot this from here.

oren commented

This solved it for me:

 watch: {
    chokidar: false
  },

(based on rollup/rollup#1666 (comment))

  • 👍4
Da2software commented

In my case using Chrome, I usually add changes to my styles using the inspector to see quick changes before being added into my code, then this makes the browser save a cache file, that was the reason why my css changes didn't update.
I solved disabling this option in the inspector Settings:
image

mikkokaar commented

Experiencing a similar problem while doing dev work in a docker container -- I'd assume this has nothing to do with the browser or livereload.

Sometimes if I make changes to a frontend file (.svelte) it won't update. I delete the bundle files and grep around looking for a string I knew was in the earlier version of the file -- can't find it anywhere and I know I've changed it in the source file
so that's to be expected. If I then spin up the dev server again (i.e. yarn dev, i.e. rollup -c -w, with rollup config being pretty much the default from the get started template) that old crap shows up in the bundle files again and the new version of the file will not end up there with any amount of saving even if the dev server notices that file changing and tries to reload.

What helps is killing the container and starting it up again.

I'm on macOS Big Sur using Docker Desktop, and mount the project directory into the container. Basically could be a file sharing problem, except that I can see the correct version of the file inside the container using other tools (grep, cat, etc)

Perhaps there's a cache somewhere, outside of the project directory? Couldn't find it though.

EDIT: Seems likely to be an issue (a weird one) with docker desktop. I can cat a file that doesn't exist and doesn't show up with ls. Sometimes cat shows the contents, other times it doesn't. 😱