How do I use nprogress with aurelia jspm

Question

I have an aurelia project using one of skeletons that uses jspm. I've tried to convert the nprogress aurelia-cli version to no avail.

import * as nprogress from 'nprogress';
import { bindable, noView } from 'aurelia-framework';


@noView()
export class LoadingIndicator {
  @bindable loading = false;

  loadingChanged(newValue) {
    if (newValue) {
      nprogress.start();
    } else {
      nprogress.done();
    }
  }
}

I keep getting this error

system.src.js:123 Uncaught (in promise) Error: (SystemJS) Invalid or unexpected token
SyntaxError: Invalid or unexpected token
    at eval (<anonymous>)
    at Object.eval (http://localhost:57996/jspm_packages/npm/[email protected]:1:123)
    at eval (http://localhost:57996/jspm_packages/npm/[email protected]:2:4)
Evaluating http://localhost:57996/jspm_packages/npm/[email protected]/nprogress.css
Evaluating http://localhost:57996/jspm_packages/npm/[email protected]

Error loading http://localhost:57996/dist_aurelia/modules/controls/loader/loading-indicator.js

Answer 1

Try modifying your import for nprogress. This is what I have in one of my projects that's also using jspm:

import nprogress from 'nprogress'; // <- using default import here
import { bindable, noView } from 'aurelia-framework';

@noView
export class LoadingIndicator {
    @bindable loading = false;

    loadingChanged(newValue) {
        if (newValue) {
            nprogress.start();
        } else {
            nprogress.done();
        }
    }
}