transpiling with babel does not work

[markokr]

package.json

{
  "devDependencies": {
    "babel-core": "^5.0.9",
    "systemjs-builder": "^0.10.3"
  }
}

code.js

var React = {};
function Foo (x) {
    if (0) { return (z) => { return z + x; }; }
    return ( <div>{x}</div>);
}

build.js

var Builder = require('systemjs-builder');
var builder = new Builder({
    baseURL: '.',
    transpiler: 'babel'
});

builder.buildSFX('code', 'result.js')
    .then(function () { console.log("Ok"); })
    .catch(function (err) { console.log("ERROR: "+err); });

node build.js gives following output:

ERROR: file:/home/marko/work/bug-sysjs/code.js:4:14: Unexpected token <,file:/home/marko/work/bug-sysjs/code.js:4:30: Expected '/' in regular expression literal,file:/home/marko/work/bug-sysjs/code.js:5:1: Unexpected token },file:/home/marko/work/bug-sysjs/code.js:6:1: Unexpected token End of File,file:/home/marko/work/bug-sysjs/code.js:6:1: Unexpected token End of File

which basically means it did not load Babel.

I don't know if it's an issue with SystemJS-builder itself or just the examples in README
need to be updated.

[guybedford]

Transpiling is only run against ES6 modules. Because you aren't using any ES6 module syntax, the source isn't being detected as ES6 automatically.

Either add some ES6 syntax (eg export var p = 5;), or set the format as es6 through metadata, by adding "format es6" to the top of the source or through configuration via builder.config({ meta: { 'code': { format: 'es6' } } }).

[markokr]

Sort of makes sense. I added export to code:

var React = {};
function Foo (x) {
    if (0) { return (z) => { return z + x; }; }
    return ( <div>{x}</div>);
}
export { Foo };

Now it gives different error message:

$ node build.js 
ERROR: SyntaxError: Error loading "code" at file:/home/marko/work/bug-sysjs/code.js
Evaluating code
    Unexpected token <

What is wrong now?

[guybedford]

By default jspm disables jsx support as it is not an ES6 feature. You can override the config and set babelOptions.blacklist = [] if you like.

[markokr]

Good, now my build.js is:

var Builder = require('systemjs-builder');
var builder = new Builder({
    babelOptions: { blacklist: [] },
    baseURL: '.',
    transpiler: 'babel',
});
builder.buildSFX('code', 'result.js')
    .then(function () { console.log("Ok"); })
    .catch(function (err) { console.log("ERROR: "+err); });

Got next error:

$ node build.js 
ERROR: ReferenceError: file:/home/marko/work/bug-sysjs/code.js: Unknown option: returnUsedHelpers

I fixed that by editing compilers/es6.js directly, then got another error:

$ node build.js 
ERROR: TypeError: Cannot read property 'length' of undefined

Seems it's problem in Babel 5.0, the build.js works when run with Babel 4.7.

[markokr]

there is problem with Babel 4.7.16 too, module paths are wrong:

build.js:

var Builder = require('systemjs-builder');
var builder = new Builder({
    transpiler: 'babel',
    babelOptions: { blacklist: [] },
    baseURL: 'lib',
    map: { 'pages': '../js/pages' }
});
builder.buildSFX('pages/main', 'result.js')
    .then(function () { console.log("Ok"); })
    .catch(function (err) { console.log("ERROR: "+err); });

lib/common.js:

var COMMON = {};
export default COMMON;

js/pages/main.js:

import _ from 'common';
console.log("Running OK");

Building works, but running fails:

$ node build.js 
Ok
$ node result.js

/home/marko/work/bug-sysjs/result.js:313
      throw "Module " + name + " not present.";
                             ^
Module pages/main not present.

Problem seems to be that although main module path is correct, modules are registered with filesystem paths for some reason (with ../js/ in front).

[ Background: I'm trying to convert working 6to5/sysjs-builder v0.8 setup to Babel + sysjs-builder v0.10 ]

[guybedford]

The bundle itself doesn't work in Node, it's for the browser. If you're looking for Node execution there's no need to use a build in Node.

[markokr]

The problem is i get same message in browser...

[guybedford]

If you're looking to get support on the project it is advisable to ask in the Gitter room and not in the issue queue.

That said in this scenario, sfx bundles will run with just that single script tag present. If there is a bug please provide the exact details of what you are including in the browser and the message you are getting.

[markokr]

Using the files mentioned in previous message, I added html page:

<!DOCTYPE html><html><body><p>Test</p>
<script src="result.js"></script>
</body></html>

When opening it in browser, following line appears:

uncaught exception: Module pages/main not present.

For correct operation I would expect that the console.log line is run.

I think you should have enough info to reproduce the bug on your own.

[guybedford]

Thanks - this was actually a bug which I've fixed in the above commit. I'm working on providing a new release shortly.

In the mean time the work around here would be to run:

builder.buildSFX('../js/pages', 'result.js')

[markokr]

Thank you, I'll wait for next release.