CODEWITHSUNDEEP
javascriptwebpackgulpbabeljs
Nima Omrani
Nima Omrani

Reputation: 335

using webpack-stream & gulp does not transpile ES6 import

I'm trying to use webpack with gulp and I'm getting this error in the browser console:

Uncaught SyntaxError: Unexpected token import

As webpack official documentation noted here I'm using webpack-stream with webpack.config.js. My gulpfile.js:

var gulp = require('gulp'),
    webpack = require('webpack-stream');

gulp.task('js', function() {
  return gulp.src('./src/js/index.js')
    .pipe(webpack(require('./webpack.config.js')))        
    .pipe(gulp.dest('./template/js/'));    
});

My webpack.config.js:

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
  },
  module: {
   rules: [{
     test: /\.js$/,
     exclude: /node_modules/,
     loader: 'babel-loader',
   }]
  },
};

index.js:

import sum from './sum';
console.log(sum(2,4));

and sum.js

const sum = (a,b) => {
   return a + b;
}
export default sum;

this is just a simple test to start the project boilerplate. I also installed babel-core,babel-loader and babel-preset-es2015 and I have the .babelrc file at the root of my project folder

.babelrc: 

{
  "presets": ["es2015"]
}

any idea what I'm missing here?

Upvotes: 2

Views: 1618

Answers (1)

Xotic750
Xotic750

Reputation: 23472

Dependency version problem.

babel-loader

v7.0.0 @danez danez released this on 21 Apr · 13 commits to master since this release

:boom: Breaking Change

Drop support for node < 4

Drop support for webpack 1

https://github.com/babel/babel-loader/releases/tag/v7.0.0

webpack-stream

"dependencies": { "webpack": "^1.12.9" }

https://github.com/shama/webpack-stream/blob/master/package.json

Upvotes: 2

Related Questions