Jspm and jspm-server hot reloading error: "Change to X cannot be handled gracefully" & "Change occurred to a file outside SystemJS loading"

Question

I've written a simple es6 module which I'm trying to get Hot-reloading using jspm + jspm-server (fork of live-server). Accorcding to the docs, to mark any es6 file as hotreloadable I set:

export let __hotReload = true

When jspm-server first loads, the modules work fine. But when I make a change I get the following error

$ node test/server.js
Serving "/Users/ashleycoleman/github/inbro" at http://127.0.0.1:8080
🤘  Client connected. JSPM watching enabled
Change detected: test/async-dom-operation.js
✅  SystemJS loaded. Initialising ChangeHandler

# Then the below error occurs when I make a change to "async-dom-operation.js"
💥  Change to http://127.0.0.1:8080/test/async-dom-operation.js cannot be handled gracefully:
👉  Change occurred to a file outside SystemJS loading

This is my project setup:

.
├── config.js
├── package.json
└── test
    ├── async-dom-operation.js
    ├── index.html
    ├── main.js
    └── server.js

server.js:

var jspmServer = require("jspm-server");

var params = {
    host: "0.0.0.0", // Set the address to bind to. Defaults to 0.0.0.0.
    open: '/test/' // When false, it won't load your browser by default.
};
jspmServer.start(params);

main.js:

import {asyncDomOperation} from '/test/async-dom-operation.js';
export let __hotReload = true; // For jspm-server hot reloading
asyncDomOperation();

async-dom-operation.js:

export function asyncDomOperation() {
    var writePara = (msg) => () => document.writeln('<p>'+msg+'</p>');
    setTimeout( writePara('Start...'), 100 );
    setTimeout( writePara('...middle'), 200 );
    setTimeout( writePara('...end'), 300 );
}
export let __hotReload = true; // For jspm-server hot reloading

config.js:

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system"
    ]
  },
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },

  map: { ...  etc ...}
});

Answer 1

this is definitely not the right answer, but I am the author of https://github.com/capaj/jspm-hot-reloader and I would be quite pleased if you tried your usecase with it and let me knwo if there are any issues. It is quite possible, that jspm-hot-reloader will be a part of JSPM 0.17.0 and I would love it if we could cover your usecase as well.