You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Feb 15, 2023. It is now read-only.
A common problem during Svelte development is when you reload your app in the browser and don't see your changes. After a few minutes, you realize that it's because your code failed to compile.
For dev builds only, Svelte bundle.js should include another Javascript file. e.g. error.js When you compile your app, the compiler will write a function to that file:
// SUCCESSFUL COMPILE
function compileErrors() {
return "";
}
or
// FAILED TO COMPILE
function compileErrors() {
return "(!) Plugin svelte: A11y: <img> element should have an alt attribute
src/HUD.svelte
67: <div id="hud-overlay">
68: <div class="hud">
69: <img src="/image.png" />
^
70: <p>Added</p>
71: </div>
";
}
When your Svelte bundle.js is loaded, it loads error.js (only during development) and calls compileErrors(). If it returns "", the app runs normally. Otherwise, it displays the compile errors in the browser:
It's a small change that will boost our productivity. Please consider it.
sisou, vogler, henrahmagix, akauppi, jm61 and 1 more
After a few minutes, you realize that it's because your code failed to compile.
I am always doing this! I now try to position the terminal window in a location behind everything else but with enough sticking out to see my next incoming failures:-
You can have it with webpack-dev-server (used by official Svelte template for Webpack) by adding devServer.overlay: true to your webpack.config.js (example here).
This can also be done with HMR over Nollup, but using a fork of Nollup for now.
I'd like to see this added as a default config for Svelte. It's these little everyday things that make frameworks a joy to work with. Please consider adding this, Svelte team...
Activity
MintyMods commentedon Oct 20, 2019
I am always doing this! I now try to position the terminal window in a location behind everything else but with enough sticking out to see my next incoming failures:-
rixo commentedon Oct 21, 2019
You can have it with webpack-dev-server (used by official Svelte template for Webpack) by adding
devServer.overlay: true
to yourwebpack.config.js
(example here).This can also be done with HMR over Nollup, but using a fork of Nollup for now.
Finally, this is also supported in the very experimental HMR plugin for Rollup.
rlaferla commentedon Oct 21, 2019
I'd like to see this added as a default config for Svelte. It's these little everyday things that make frameworks a joy to work with. Please consider adding this, Svelte team...
antony commentedon Jul 30, 2020
Isn't this a job for the Svelte compiler rather than this template?
rixo commentedon Jul 30, 2020
@antony it's about displaying compile errors in the browser. It's a feature of the dev server (that needs support from the bundler).