aurelia - error using material-components-web with skelton-esnext project - aurelia

Question

I've successfully used the material-components-web library from within my aurelia skeleton-esnext-webpack projects but I am strugling to get them working in a skeleton-esnext project.
The problem seems to be with the fact that the skeleton-esnext project uses jspm with system.js as its module loader.
I have added "#material/textfield": "npm:#material/textfield#^0.3.6" to the jspm dependencies section of my package.json which seems to install the correct #material libraries to my jspm_modules/npm/#material.
Now, when I try to access any class from this library from within any my aurelia view models
import {MDCTextfieldFoundation} from '#material/textfield';
I get the following error in the browser when I run the project:
Error: (SystemJS) Unexpected token import
SyntaxError: Unexpected token import
at eval (<anonymous>)
at Object.eval (http://localhost:9000/jspm_packages/npm/#material/textfield#0.3.6.js:1:123)
at eval (....
Any suggestions to whats most likely causing this issue?

Answer 1

SystemJS is importing the raw source file of the plugin instead of the transpiled one (you can see this if you look into jspm_packages/npm/#material/textfield#0.3.6.js.
You can fix it by changing the location in there to point to the dist directory of the directory textfield#0.3.6. However, it gets overriden all the time on potential updates. And it is not saved in CVS.
Another, more simpler approach, would be to import the correct file in your view model:
import {MDCTextfieldFoundation} from '#material/textfield/dist/mdc.textfield';