elderjs
elderjs copied to clipboard
[Linux] Dev mode seems broken on 1.5
Hi, from 1.5 onwards the reload in the dev auto reload mode seems to be broken for elder routes on my system. If this is a system configuration (Linux, Node 16.5) issue i can provide some more logs but im hoping this can be verified independently on your end. I believe this is an error in regenerating the HTML but am not familiar enough with the rollup/esbuild plugins to debug it myself.
This is all on a fresh elder template retrieved via npx degit Elderjs/template elder-demo
which uses a >=1.5 elderjs version.
When i start npm run dev
and modify a component in the "components" subfolder (Clock.svelte), the the change is picked up by the watcher, is compiled and both JS, and the HTML is updated as expected.
However, if i modify a route file (Home.svelte, changing the h1 tag) the change is picked up by the watcher, the js is compiled, but the html is not updated! The browser does not reload, and if i manually do, the css and js is broken since the old html points to the wrong asset hashes.
On 1.4.16 this still works fine, on 1.5 and following it does not. This also affects esbuild.
Not experiencing these issues and working in Elder across multiple teams daily.
There was an issue in earlier versions of 1.5 but current doesn’t have any besides a css import/caching issue in dev mode which I just identified today.
Can you try deleting your package.lock and making sure you are on latest?
I’d love more logs on this if you have them. Happy to dig in.
Since its works on your end i did some more digging. So the issue is that the server is not restarted after a change of the route files.
I believe there is an issue with the chokidar
package used to detect file changes on (my) linux. I guess you are using macosx, which this plugin is natively designed to support?
I did some "console.log" debugging on the change handler in https://github.com/Elderjs/elderjs/blob/2f3f8c69d421ab490ae776eee157bec4d0050bd4/src/rollup/rollupPlugin.ts#L339-L345 and it does not pick up all changes. Most importantly it misses the changes in the "ELDER/compiled/routes" folder which would contain the changes in the home route. Maybe since it has to fall back to polling on linux it gets overwhelmed by the many changes?
What hides this somewhat, and hides this issue on the pre v1.5 versions is that the important "startOrRestartServer()" is also called by the "writeBundle()" in the same file https://github.com/Elderjs/elderjs/blob/2f3f8c69d421ab490ae776eee157bec4d0050bd4/src/rollup/rollupPlugin.ts#L529-L532 This is also called on all changes (?) and triggers a restart if the type == "client". Hence the restart working on my system if a client component is changed. In the pre 1.5 versions this type check is missing, https://github.com/Elderjs/elderjs/blob/58e027ab8f851992873130b638bea76c31ef1130/src/rollup/rollupPlugin.ts#L451-L465 and the server is restarted after every "writeBundle()" build. This then picks up the changes in the route.
There is a chance that this is just my linux system maybe someone else on linux could try to reproduce?.
I believe there is an issue with the chokidar package used to detect file changes on (my) linux. I guess you are using macosx, which this plugin is natively designed to support?
Yep, Mac OS, though one team member is on Linux Arch and he has mentioned having to restart to get changes, IIRC. I will ask him more about his experience to see if he can recreate it.
I know @lukeed coached me through an issue with polling and chokidar
so I will ping him as well.
Just confirmed with a team member, he has issues on and off with changes not being detected in Arch Linux.
FYI: This also happens on Windows 10.
Tested on a clean npx degit Elderjs/template svelte-elderjs2
install.