JSPM System.import 404s - jspm

Question

I am trying to learn JSPM as it seems like it is the future for installing client-side JavaScript. I am NOT attempting to use ES6 or TypeScript but am actually using CoffeeScript which I compile into 'standard' JavaScript for the browser. I am running node.js in express with my public files contained in ./public and accessible from the path /.
Having installed jspm my package.json configuration is:
"jspm": {
"directories": {
"baseURL": "public",
"packages": "public/lib"
}
}
It is configured like so:
System.config({
baseUrl: '/',
defaultJSExtensions: true,
transpiler: false,
paths: {}
});
With this setup I run: jspm install lodash which installs the package in public/lib/npm/lodash#4.5.1. In my application JavaScript I would expect to be able to run:
System.import('lodash');
and would expect that to return a Promise. However, I get a 404 on /lodash.js. So, in an effort to fix this I decided to use the explicit path to lodash: lib/npm/lodash#4.5.1/lodash. That seems to resolve the lodash 404 but then I get a 404 for /buffer.js and /process.js which I assume are dependencies of lodash.
Surely there has to be a better way than this? What am I missing here?! Part of the difficulty I am having is that most of the examples seem to use ES6 import directives which are irrelevant to me.

Answer 1

It seems that you are missing some paths on your systemjs config:
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: false,
paths: {
"github:*": "lib/github/*",
"npm:*": "lib/npm/*"
},
map: {
"lodash": "npm:lodash#4.6.1",
...
"npm:lodash#4.6.1": {
"buffer": "github:jspm/nodelibs-buffer#0.1.0",
"process": "github:jspm/nodelibs-process#0.1.2"
},
...
}
});
Also, you should have the lodash dependency declared on your package.json:
{
"jspm": {
"directories": {
"baseURL": "public",
"packages": "public/lib"
},
"dependencies": {
"lodash": "npm:lodash#^4.6.1"
}
}
}