Development builds should warn developer of compile errors in the browser

[rlaferla]

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.

[MintyMods]

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:-

[rixo]

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.

Finally, this is also supported in the very experimental HMR plugin for Rollup.

[rlaferla]

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]

Isn't this a job for the Svelte compiler rather than this template?

[rixo]

@antony it's about displaying compile errors in the browser. It's a feature of the dev server (that needs support from the bundler).