These are chat archives for systemjs/systemjs

24th
Feb 2015
Andrew Popovych
@piratus
Feb 24 2015 12:01

Hi everyone!

I'm trying to get System.js running with babel and I can't find the babel.js file in the node_modules\babel. There's browser.js which I've tried renaming and putting in the same folder as system.js and es6-module-loader.js but I'm getting

TypeError: Error loading "main" at http://127.0.0.1:5000/static/js/main.js
Include Traceur or 6to5 for module syntax support.
Guy Bedford
@guybedford
Feb 24 2015 12:25
@pri
@piratus it looks like you need to update to the latest version which included the Babel name change
Andrew Popovych
@piratus
Feb 24 2015 12:53
I'm using 0.14.1
Downloaded a zip from releases
Andrew Popovych
@piratus
Feb 24 2015 13:10
Readme.md points to es6-module-loader.js version 0.13. I've updated to 0.14 and it worked.
Is it possible to use babel for JSX or I still need a plugin to load those?
Guy Bedford
@guybedford
Feb 24 2015 13:29
@piratus this is a bit of an issue at the moment actually - it seems a lot of users really want the JSX support through Babel
so feeling rather evil having disabled it now
it doesn't make sense in the long term
but that is a multi-year long term
Andrew Popovych
@piratus
Feb 24 2015 14:01
The jsx plugin (https://github.com/floatdrop/plugin-jsx/blob/master/jsx.js) requires react-tools which I can't load in browser. Any suggestions on how to load jsx?
Guy Bedford
@guybedford
Feb 24 2015 14:03
the question is how to load the transitive dependencies in the browser - and this is why it's based on jspm
it is possible to construct a jsx plugin which uses the single-file build of Babel
a plugin is pretty much just a translate hook
if you wanted to create one for babel, you can add a dependency on @babel which is the name jspm stores it under
we don't have anything easier for this use case right now unfortunately, but happy to guide you through the process if you're interested
Andrew Popovych
@piratus
Feb 24 2015 14:14
Do I have to use jspm ?
Guy Bedford
@guybedford
Feb 24 2015 14:15
the jsx plugin is designed for jspm yet
but it is certainly possible to make a jsx plugin for non-jspm use cases
Andrew Popovych
@piratus
Feb 24 2015 14:26
So I've tried this
var babel = require('babel');

exports.translate = function (load) {
  var output = babel.transform(load.source);
  load.source = output.code;
  load.metadata.sourceMap = output.map;
};
and I'm getting "undefined is not a function (evaluating 'type.toUpperCase()')"
Guy Bedford
@guybedford
Feb 24 2015 14:27
You should return the source, not overwrite the load record
return output.code;
Andrew Popovych
@piratus
Feb 24 2015 14:29
Same error message
Guy Bedford
@guybedford
Feb 24 2015 14:30
is it running the transform ok?
as in is it failing on the line babel.transform or later
Andrew Popovych
@piratus
Feb 24 2015 14:32
later
Guy Bedford
@guybedford
Feb 24 2015 14:33
It's probably advisable to transform into CommonJS, as I don't think Babel does JSX -> Es6 output?
Andrew Popovych
@piratus
Feb 24 2015 14:33
the output from babel is
"use strict";

var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };

var React = _interopRequire(require("react"));

var Component = exports.Component = React.createClass({
  displayName: "Component",

  render: function render() {
    return React.createElement(
      "div",
      null,
      "It works"
    );
  }
});
Object.defineProperty(exports, "__esModule", {
  value: true
});
Guy Bedford
@guybedford
Feb 24 2015 14:34
it sounds like the issue is loading React itself then?
can you load react ok?
Andrew Popovych
@piratus
Feb 24 2015 14:38
This one works
import React from 'react';

export function init() {
  React.render(
    React.createElement("div", null, "It works"),
    document.getElementById('root')
  )
}
It fails if I add
import Component from 'Component.jsx!'
Andrew Popovych
@piratus
Feb 24 2015 14:52

If I omit JSX and change the import statement to

import {Component} from 'Component';

then it renders

but if I … import from 'Component.js!jsx' the Component is undefined
if importing without the {} then the component is available as Component.Component
Guy Bedford
@guybedford
Feb 24 2015 15:32
Yes that's correct - you can't use `import { Component } from 'Component.jsx!' to import from CommonJS
We are looking at enabling this
but for now acessing import Component from 'Component' and then doing Component.Component is the right thing to do
alternatively use the default export - export default React.createClass...
@piratus actually try setting options.modules = 'ignore' when doing the Babel transpilation rather
that way you compile to ES6 modules and eveything should work out as expected
actually no that won't work unfortunately - it removes module syntax not just ignoring it
Guy Bedford
@guybedford
Feb 24 2015 15:37
I've created an issue at systemjs/systemjs#359 to track the imports handling
Andrew Popovych
@piratus
Feb 24 2015 17:08
thanks
Andrew Popovych
@piratus
Feb 24 2015 17:24
I did some more digging
Using JSXTransformer produces ES6 modules
import React from 'react';

export var Component = React.createClass({
  displayName: 'Component',
  render:function() {
    return React.createElement("div", null, "It works");
  }
});
And in this case import {Component} from 'Component.js!jsx' finally works
again, thanks very much for your help
Guy Bedford
@guybedford
Feb 24 2015 17:44
nice! thanks for the udpate