Defer throwing asset errors until after dependencies are handled.

packages/core/parcel-bundler/src/Bundler.js

@@ -593,6 +593,13 @@ class Bundler extends EventEmitter {
       })
     );
 
+    // If there was a processing error, re-throw now that we've set up
+    // depdenency watchers. This keeps hot-reloading working if there is an
+    // error in a dependency not directly handled by Parcel.
+    if (processed.error !== null) {
+      throw processed.error;
+    }
+
     // Store resolved assets in their original order
     dependencies.forEach((dep, i) => {
       asset.dependencies.set(dep.name, dep);

packages/core/parcel-bundler/src/Pipeline.js

@@ -17,16 +17,30 @@ class Pipeline {
     }
 
     let asset = this.parser.getAsset(path, options);
-    let generated = await this.processAsset(asset);
+    let error = null;
     let generatedMap = {};
-    for (let rendition of generated) {
-      generatedMap[rendition.type] = rendition.value;
+    try {
+      let generated = await this.processAsset(asset);
+      for (let rendition of generated) {
+        generatedMap[rendition.type] = rendition.value;
+      }
+    } catch (err) {
+      // Error instances need to be converted to plain JS objects.
+      if (err instanceof Error) {
+        error = {
+          message: err.message,
+          stack: err.stack
+        };
+      } else {
+        error = err;
+      }
     }
 
     return {
       id: asset.id,
       dependencies: Array.from(asset.dependencies.values()),
       generated: generatedMap,
+      error: error,
       hash: asset.hash,
       cacheData: asset.cacheData
     };

packages/core/parcel-bundler/src/assets/ElmAsset.js

@@ -44,12 +44,7 @@ class ElmAsset extends Asset {
       options.optimize = true;
     }
 
-    let compiled = await this.elm.compileToString(this.name, options);
-    this.contents = compiled.toString();
-    if (this.options.hmr) {
-      let {inject} = await localRequire('elm-hot', this.name);
-      this.contents = inject(this.contents);
-    }
+    this.elmOpts = options;
   }
 
   async collectDependencies() {
@@ -76,7 +71,14 @@ class ElmAsset extends Asset {
   }
 
   async generate() {
-    let output = this.contents;
+    let compiled = null;
+    compiled = await this.elm.compileToString(this.name, this.elmOpts);
+    let output = compiled.toString();
+
+    if (this.options.hmr) {
+      let {inject} = await localRequire('elm-hot', this.name);
+      output = inject(output);
+    }
 
     if (this.options.minify) {
       output = pack(output);
@@ -129,6 +131,10 @@ class ElmAsset extends Asset {
       return result.code;
     }
   }
+
+  generateErrorMessage(err) {
+    return err.message;
+  }
 }
 
 module.exports = ElmAsset;

packages/core/parcel-bundler/src/builtins/hmr-runtime.js

@@ -57,7 +57,9 @@ if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
     }
 
     if (data.type === 'error') {
-      console.error('[parcel] 🚨  ' + data.error.message + '\n' + data.error.stack);
+      console.error(
+        '[parcel] 🚨  ' + data.error.message + '\n' + (data.error.stack || '')
+      );
 
       removeErrorOverlay();
 
@@ -82,7 +84,7 @@ function createErrorOverlay(data) {
   var message = document.createElement('div');
   var stackTrace = document.createElement('pre');
   message.innerText = data.error.message;
-  stackTrace.innerText = data.error.stack;
+  stackTrace.innerText = data.error.stack || '';
 
   overlay.innerHTML = (
     '<div style="background: black; font-size: 16px; color: white; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; padding: 30px; opacity: 0.85; font-family: Menlo, Consolas, monospace; z-index: 9999;">' +