When I npm run dev my SvelteKit / vite app locally, after a minute or so, a full hot module reload is triggered which leads to break my design.
Stacktrace example:
23:09:37 [vite] page reload .svelte-kit/generated/nodes/8.js
23:09:37 [vite] hmr update /.svelte-kit/generated/root.svelte
23:09:37 [vite] page reload .svelte-kit/generated/server-internal.js
23:09:37 [vite] page reload src/declarations/cmc/cmc.factory.did.js
23:09:37 [vite] hmr update /src/frontend/src/lib/components/guards/IdentityGuard.svelte
etc.
I am not sure is the issue is linked to the fact that my global style is not correctly reloaded (I'm using sass) or the fact that weirdly some raw script Svelte components are injected into style tag in the dom
e.g. I find following tag in the dom
<head>
<style type="text/css" data-vite-dev-id="/Use...CollectionEdit.svelte?svelte&type=style&lang.css">
><script lang="ts">
import type { PermissionText } from '$lib/constants/rules.constants';
etc.
</script>
</style>
Another thing that is weird to me is that vite often detects changes in tsconfig.json and triggers new build even though the file has not changed in weeks
23:09:37 [vite] changed tsconfig file detected: /Users/.../admin/tsconfig.json - Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values.
Any clue or idea what I can track to solve this issue?
Alright solved it or at least find a workaround. The issue seems to have been linked to the fact that my Mac triggers incorrect refresh through fsEvents. Even tough there are no changes on the local file system, it requests full reload after 1-2 min. Disabling fsEvents in the vite.config.ts prevents this to happen and per extension, avoid the problem.
server: {
watch: {
useFsEvents: false
},
}
Why sass is not intepreted on full reload is to me unclear but, at least there is no more issue and hmr still works.
Related
this is my first time working with node, I set up a project and used the command:
npx tailwindcss -i styles.css -o ./tailwind/output.css --watch
to start the build process for the tailwindcss classes, but this stops the VS Code live server extension from refreshing the webpage, it is supposed to refresh everytime I save the html file, but now I have to manualy go into the browser and refresh it, which defeats it's purpose. Only after I type CTRL + C (^C) in the terminal, does it work, but in that case the tailwindcss rebuilding stops. Has anyone encountered this before or is this a beginner mistake?
go to this address in the VS Code :
File > Preferences > Settings, then search live-server. scroll down and check the Full Reload. setting Full Reload to true solves the issue.
If full reload is not wanted, a longer delay may work "liveServer.settings.wait" : 300 in /.vscode/settings.json. If sometimes fail, a second save will inject the new css.
The problem was solved for me by setting liveServer.settings.fullReload": true in /.vscode/settings.json.
I need two compiles to achieve server-side rendering with React. I have spent many days trying and it does not work. With Parcel 1 it worked perfectly. My problem is that after compiling it tells me that Node does not recognize the css that it is going to send to the client. In parcel I just put --target = node6 and everything worked great. Help !!
Here is my actual package.json:
Here is the error:
SyntaxError: Unexpected token '.'
at Object.compileFunction (node:vm:352:18)
dist-server/index.css:1
.line-total{border-top:2px solid #0}
This might be a bit of an onion-peeling exercise to get everything working, but I think I found the source of the first issue, and I can give you some tips about where to go from there.
Here's an overview of what is happening:
Your build:server command is telling parcel to bundle your server located at server/index.js
Your server/index.js file has a line that imports your client app code:
import App from '../src/App.js';
App.js imports a .css file.
So when you go to run the server bundle with node, the first thing it does is try to require("ouput-css-file.css"), which chokes because it's not javascript.
You could fix this first layer of errors by instead importing the .css file in your src/index.html instead of src/App.js:
<link rel="stylesheet" href="./App.css"></link>
That should get you past the problem mentioned in your question, but it looks like you'll hit another layer of (unrelated) errors in your server/index.js file - you need to correctly reference the ../dist files from the client bundle output, and actually import the renderToString method, were the first that I hit, but it keeps going.
You might want to take a step back and try to get the server code working without parcel (while still using parcel to generate the client bundle) and then addd parcel back to the server build process after you're sure you've got it working.
I am running the webpack / webpack-dev-server portion of the base Vue.js Webpack template (https://github.com/vuejs-templates/webpack/) inside of a docker container I created. The container also contains the vue CLI in order to create new projects (you can get my container here if you want: https://hub.docker.com/r/ncevl/webpack-vue/).
Hot-reload does not work after moving from the webpack-simple template to this one.
Everything was working using the Webpack-Simple template which you can clone / see over here: https://github.com/vuejs-templates/webpack-simple
I was able to get the simple template running (with hot-reload working as intended) with the following webpack-development-server launch command:
webpack-dev-server --hot --inline --progress --host 0.0.0.0 --watch-poll
That said the full (not simple) version of the webpack template does not appear to use a webpack-dev-server launch command and instead appears to use additional middleware as referenced in build/dev-server.js (https://github.com/vuejs-templates/webpack/blob/master/template/build/dev-server.js) and the webpack dev config.
Since the --watch-poll was the key to getting the WDS hot-reload functionality to work within a docker container in the last project, my thinking is that I need to do something similar with the webpack-hot-middleware but I dont see anything in their docs (over here: https://github.com/glenjamin/webpack-hot-middleware) that talks about changing to a polling based approach.
I am not 100% sure the polling flag will do the trick since I can see the container recompile my source when I make a change. I can also see the change in my browser if I refresh it manually.
Whats stranger still is if I inspect my page in browser within chrome dev tools, and then head over to network / XHR I can see that the browser actually does receive information from the webpack-dev-server, but visually it does not update.
Give the above I assume websockets (or socket.io which I think is used) are working and communicating between the browser and the WDS so maybe this is a browser caching issue of some sort?
I checked in my console and found this so it is looking like a header issue:
For reference the text error from that image (to make it easier for anyone having the same issue to find this post) is:
EventSource cannot load http://__webpack_hmr/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://0.0.0.0:8080' is therefore not allowed access.
Again the Hot-Reload / Hot Module Reload was working with this identical container setup when using the webpack-simple Vue.js template.
I am wondering if anyone has run into anything similar or has any ideas on how to add the polling option . I guess my alternative would be roll back to a more basic webpack config and rebuild that portion of things to use the traditional webpack-dev-server / webpack config but give the above I am not sure that is going to fix it.
I am adding this as a separate answer since it more specifically answers the question in the title, while my other answer more specifically explains what solved my actual problem.
The vue.js webpack template project (which can either be init'd from the Vue CLI or pulled from its repo over here: https://github.com/vuejs-templates/webpack) separates its config files into several different directories.
I am posting this answer so that anyone who runs into the need to add polling to their project will be able to understand how / where to do that.
The base project structure for a Vue.js webpack template project looks like this:
The files that you care about if you are messing with trying to get hot module reload working are related to creating your server primarily with webpack-dev-middleware. The most important files related to that are highlighted here:
Basically if you want to add the polling code to the webpack-dev-middleware server you need to be in the /build/dev-server.js file on lines 20 to 24 that look like this:
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})
To add polling you would add it just before or after quiet: true. As a side note, if you are having trouble with HMR I would change "quiet:true" to queit false to get a more verbose read out of whats going on from webpack-dev-middleware. I have included verbose and polling modifications to the above code here:
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: false, //Changed to for additional verbosity
watchOptions: { //Add Polling
aggregateTimeout: 300,
poll: 1000
}
})
My other answer is in regards to what ended up solving my problem, not necessarily how to actually add polling (which might be necessary for someone else but did not end up being needed to make my dockerized setup work).
It should also be noted that sometimes when HMR (webpack hot module reload) is not detecting changes it is due to the fact that webpack-hot-middleware or webpack-dev-middleware is running into an issue whereby some invisible characters are / were added to the name of the base project directory (probably by someone building the base Vue project) and therefore webpack on certain OSes is not able to see the changes.
If that happens to you and you are on OSx or running webpack inside of a docker container and you can't get HMR to detect changes, try to rename your vue-webpack project directory and it should work.
Ok. So I can't really take credit for this one since it was actually answered by Discuss user Cristian Pallarés over here: http://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server
Christian says:
I was just trying the same. I just use "php artisan serve" on localhost:8000, and Webpack Dev Server on localhost:3000. You should make this:
set your webpack config "output.publicPath" as "http://localhost:3000/static/" instead of "/static/"
make your php application load this:
The key is the output.publicPath being absolute. Now, you should run "php artisan serve" and launch your webpack dev server too (in my case I use gulp).
Basically I took that and dug through the Vue.js Webpack Template files to locate the config file where webpack was looking for the public path. the public path setting ended up being in the index.js file located in the /config directory of the template.
I changed my code to look like this:
assetsSubDirectory: 'http://localhost:8080/static/', //!!Changed from /static/
assetsPublicPath: 'http://localhost:8080/', //!!Changed from /
As opposed to the previous setting which DID NOT WORK and looked like this:
assetsSubDirectory: '/static/',
assetsPublicPath: '/',
After that I was able to see my changes hot reload while running the vue.js Webpack template from within my docker container.
I have a Sails.JS application with Angular.JS front-end.
The angular files are stored in /assets/linker and they are injected properly on start. My issue is that when I change css or js file from assets the change doesn't appear on the server, the loaded js file is the same as when the server started. I tried to clear my browser cache and tried in another browser, but still the same.
I also tried to run the application with forever -w and nodemon, but still nothing. The application is in dev mode, anyway starting with sails lift --dev does not solve the issue neither.
I have feeling that I miss something in configuration. Is there any way to force reloading of assets?
You need to check your Gruntfile configuration. It's where the magic happen in term of linker and livereload.
Specifically, you'll need to look at the watch task and the related tasks.
By default it looks like this :
watch: {
api: {
// API files to watch:
files: ['api/**/*']
},
assets: {
// Assets to watch:
files: ['assets/**/*'],
// When assets are changed:
tasks: ['compileAssets', 'linkAssets']
}
}
I found the problem. I made the Angular.js structure with angular generator
which adds not only the js structure, but also karma test environment containing shell and bat scripts, karma framework and more.
Building sails application with all these files in watched folder is breaking the refresh functionality. There's no errors in console and nothing in the running application, but the files from assets are not reloaded anymore.
Tip of the day: be careful with the files you have in assets and take a look what does generators generate!
I came here looking for livereload, after a little search
Live Reloading
Enabling Live Reload in Your HTML
in current version of Sails v0.10 there is a file for watch task: tasks/config/watch.js
I followed this a link to try to configure Twitter's boostrap.less under Node 0.6.12 and Express 2.5.8:
app configuration:
app.use(express.compiler({src: publicDir, enable: ['less']}));
app.use(express.static(publicDir));
stylesheet link:
<link rel='stylesheet' href='/stylesheets/bootstrap.css' />
boostrap.less is the vanilla bootstrap.less file from bootstrap 2.02. the code section of it starts with:
// CSS Reset
#import "/public/stylesheets/reset.less";
When node is fired up and the page requested, the less paths get resolved correctly but the less parser throws an error:
../node_modules/less/lib/less/parser.js:385
throw new(LessError)(e, env);
The error causes node to crash after returning a 500 error for the contents of the boostrap.css file.
Any ideas how to get bootstrap.less to work in my setup?
Just a thought, but if you have Twitter's bootstrap.less via a git submodule, do you need to update the submodule? (we made that mistake, and had the same error as you until we realized it and fixed it)