SystemJS Builder + Babel issue

Question

I'm trying out SystemJS and getting an issue when trying to use the builder alongside babel.

It's a simple ES2015 project, so won't bore you with the details of that, but my bundle setup looks like the below.

config.js:

System.config({
    transpiler: 'babel',
    paths: {
        'babel': './node_modules/babel-core/lib/api/browser.js'
    }
});

builder.js:

var path = require("path");
var Builder = require('systemjs-builder');

var builder = new Builder('.', 'config.js');

builder
    .buildStatic('./src/app.js', './dist/index.js')
    .then(function() {
        console.log('Build complete');
    })
    .catch(function(err) {
        console.log('Build error');
        console.log(err);
    });

I'm getting the following error: ReferenceError: require is not defined on the browser.js file from babel. Prior to adding the babel path, I was getting an error that SystemJS was trying to locate babel.js relative to my source directory.

I'm obviously missing something simple here, but the docs aren't exactly straight forward, and seem to be a bit outdated with regards to babel. Do I need to run babel on the files prior to bundling with SystemJS so that require is available or something?

Answer 1

Not positive on this because I use jspm so I didn't have to set this up manually, but it looks like the correct main file for babel-core is ./node_modules/babel-core/browser.js which has "format global"; instead of "format cjs"; which would explain your error.