Using gulp-babel to transpile ES6 from @Material components

Question

I am working through a @Material tutorial here and am running into an issue with transpiling the ES6 code. I previously built the project using Gulp as my task runner and am wondering if I should just use webpack instead for the bundling functionality.

I have my gulpfile.js code set up as such:

const babel = require('gulp-babel');

gulp.task('scripts', function(done) {
    return gulp.src(
      [
      'node_modules/@material/'
      ])
      .pipe(babel({
        presets: ['env']
      }).on('error', babel.logError))
      .pipe(gulp.dest('compiled'))
});

The JS file with the @Material components is loaded like such:

<script type="module" src="js/loggedin.js"></script>

That JS file looks like this:

import {MDCRipple} from '@material/button';
import {MDCTextField} from '@material/textfield';

However, in the console, I am getting the following error: Uncaught TypeError: Failed to resolve module specifier "@material/button". Relative references must start with either "/", "./", or "../".

When I try to resolve by adding a relative path, the console complains:

GET http://localhost:8081/node_modules/@material/button net::ERR_ABORTED 404 (Not Found)

I've double-checked the path and it should be correct. What could I be doing wrong?

Using gulp-babel to transpile ES6 from @Material components

0 Answers0