Load systemjs from bower_components

I installed systemjs with bower. I successfully load it in my website, but in system-config.js, I get mistake SystemJS is not defined. Why?

 <script src="./bower_components/systemjs/build/system.min.js"></script>
 <script src="./scripts/system-config.js"></script>

SystemJS.config({
    transpiler: 'plugin-babel',
    map: {
        //system transpiler
        'plugin-babel': './bower_components/systemjs-plugin-babel/plugin-babel.js',
        'systemjs-babel-build': './bower_components/systemjs-plugin-babel/systemjs-babel-browser.js',

        //app scripts
        'main': './scripts/main.js',
        'requester': './scripts/requester.js',
        'templates': './scripts/templates.js',
        'data': './scripts/data.js',

        //controllers
        'home': '../controllers/home.js',
        'login-form': '../controllers/login-form.js',

        //js libraries
        'jquery': './bower_components/jquery/dist/jquery.js',
        'navigo': './bower_components/navigo/lib/navigo.min.js',
        'handlebars': './bower_components/handlebars/dist/handlebars.js',
    }
});

SystemJS.import('./scripts/main.js').then(x => console.log(x), x => console.log(x));

Solution

You probably made the same mistake I made when trying to reproduce the error.

You installed SystemJS with the command:

bower install systemjs

This is not the Library you are looking for.

Go to https://bower.io/search/ and search for systemjs. You will find the first package saying

JavaScript object with the user's system information.

The real package is named system.js and not systemjs

Solution

add a dot to the install command.

bower install system.js