Trouble using babel transpiler with WebPack

Question

I'm trying to use this package in my application.

It appears to be written in ES6 so I need a transpiler like babel. I've started a new project and tried the following:

Create new index .html / .js file for testing.
npm install audio-effects
npm install gulp gulp-babel babel-preset-es2015
Create .babelrc

After trying to run this from the dist folder with python -m SimpleHTTPServer, I got an error: index.js:3 Uncaught ReferenceError: require is not defined.

After some digging, this is because require can't be used client-side. So next I looked into using WebPack to allow me to use require.

I went into my dist folder (where my transpiled javascript is) and ran:

webpack ./index.js index.js

But now I'm getting the error index.js:78 Uncaught SyntaxError: Unexpected token import.

Can anybody see what I'm missing (apart from a NPM-ES6-Gulp-WebPack tutorial)? I seem to be stuck in a loop of WebPack-ing and transpiling.

index.html

<!DOCTYPE html>
<html>
<body>

<h4>Welcome</h4>

<button onclick="startAudio()">Start Audio</button>

<script src="js/index.js"></script>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>

</body>
</html>

index.js (pre-babel / WebPack - ification)

import {HasAudioContext} from 'audio-effects';

function startAudio() {
    console.log("Start Audio...");

    let audioContext = null;
    if (HasAudioContext) {
        console.log("Has Audio CTX");
        audioContext = new AudioContext();
    }
    else {
        console.log("No Audio CTX");
    }
}

gulpfile.js

var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
  return gulp.src("src/app.js")
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});

Well, webpack would need a babel-loader to read ES6. Have you included that? Another option, perhaps better, would be to use Gulp with Browserify which also lets you require modules in the browser. That way you don't need to involve webpack. — tomtom, Aug 01 '16 at 18:43
This is all new to me, have you got a good resource on how to use gulp / browserify together? Thanks for the reply! — TomSelleck, Aug 01 '16 at 18:48
https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=webpack%20babel%20tutorial — Daniel Lizik, Aug 01 '16 at 18:59
@Daniel_L I'm familiar with Google, I thought they might be able to suggest one they personally found useful. — TomSelleck, Aug 01 '16 at 19:06
there's a billion, each different for your exact needs...'boilerplate' is a good keyword — Daniel Lizik, Aug 01 '16 at 19:10
"There's a billion". Which is why I asked for one. Everyone would be better served if you actually helped people rather than try to seem intelligent by posting a Google search result. — TomSelleck, Aug 01 '16 at 19:39

score 1 · Accepted Answer · edited May 23 '17 at 12:08

I've made some changes to the library (I'm the original author of the package). When installing the package with npm, you will now get the transpiled ES5 code instead of the ES6 source. You'll still need webpack, browserify, ... to load the module though.

This might fix the the Uncaught SyntaxError: Unexpected token import error, so please update your audio-effects library to the latest version.

The wrong imports as mentioned in the answer by Jorawar Singh should be resolved as well.

I'm still working on the library so if you run into any problems, feel free to create an issue or pull request on github.

I personally use the package with webpack. this is my webpack.config.babel.js file (remove comments). Note: I'm using react, if you don't set the react parameter to false.

import config from 'madewithlove-webpack-config';

export default config({
    react: true,
    sourcePath: 'src', // Source directory
    outputPath: 'builds', // Transpiled coded directory
});

This imports a basic webpack config from https://github.com/madewithlove/webpack-config/

Since I'm writing code in ES6, I'm transpiling it with babel, my .babelrc file looks like this:

{
    "presets": ["es2015", "stage-0"],
}

With all this setup, you can just run webpack with webpack-dev-server --inline --hot.

You don't have to use the madewitlove webpack config but it takes care of some standard setup like compiling scss etc.

I hope this gives you an insight in how to use the audio-effects package or any other ES6 package.

Jorawar Singh · Answer 2 · 2016-08-01T22:35:54.977

Well what i understand there was some issues with this library it was written es6 and when you do import and want to complie into es5 with webpack then webpack will also bummbel all the require modules for you. Here's my webpack.config look likes

var webpack = require('webpack');
var config = {  
  entry: './index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    loaders: [   {
       test: /\.js$/,
      loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
  }]
  }
};

module.exports = config;

running by webpack will compile the library and your index.js file to bundle.js

there was some other issues i think in order to get this library you need to do some small changes in library. from

'./Helpers/HasAudioContext'; //this doesn't exist and 
                                                //webpack will give you compile error

to

'./helpers/hasAudioContext';

I had one issue whitch i couldn't resolve is i couldn't run the startAudio function but through the index.js i could (weard let me know if you find why) in your index.js

document.getElementById("btn").addEventListener("click", startAudio);

there are still some issues witch i want to resolve and also there are some issues with the library witch need to be resolved

Trouble using babel transpiler with WebPack

2 Answers2