Nameless requires in JSPM

Question

Basic question, im trying to convert my webpack project to jspm, in which i load JS based on the site's current view, like this:

    var currentView = document.body.getAttribute('data-jscontroller');
    if ( currentView ) {
        var viewPath = './views/' + currentView;
        require( viewPath );
        App.Views[currentView].init();
    }

Unfortunately this returns an error:

es6-module-loader.js:7:26213
TypeError: Module ./views/home not declared as a dependency.

The contents of the file being required is a simple object that simply builds an object with event subscribers to the app functionality for the loaded view.

Is there a way to achieve this?

Answer 1

Turns out require are statically parsed so they won't allow js variables inside it. For those cases, there's System.import:

var currentView = document.body.getAttribute('data-jscontroller');
if ( currentView ) {
    var viewPath = './views/' + currentView;
    System.import(viewPath).then(function(){
       App.Views[currentView].init();
    });
}