Skip to content
This repository was archived by the owner on Feb 15, 2023. It is now read-only.
This repository was archived by the owner on Feb 15, 2023. It is now read-only.

Development builds should warn developer of compile errors in the browser #79

@rlaferla

Description

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

image

It's a small change that will boost our productivity. Please consider it.

Activity

MintyMods

MintyMods commented on Oct 20, 2019

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

buildFail

transferred this issue fromsveltejs/svelteon Oct 20, 2019
rixo

rixo commented on Oct 21, 2019

@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

rlaferla commented on Oct 21, 2019

@rlaferla
Author

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

antony commented on Jul 30, 2020

@antony
Member

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

rixo

rixo commented on Jul 30, 2020

@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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @antony@rlaferla@rixo@MintyMods@Conduitry

        Issue actions

          Development builds should warn developer of compile errors in the browser · Issue #79 · sveltejs/template