Tom celic Tom celic - 1 year ago 70
Node.js Question

Trouble using babel transpiler with WebPack

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

After trying to run this from the
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

I went into my
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
tutorial)? I seem to be stuck in a loop of WebPack-ing and transpiling.


<!DOCTYPE html>


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

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


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");


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

gulp.task("default", function () {
return gulp.src("src/app.js")

Answer Source

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

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.