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

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/[email protected]: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/[email protected].

You can fix it by changing the location in there to point to the dist directory of the directory [email protected]. 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';