petehunt / node-jsx

transparently require() jsx from within node
164 stars 32 forks source link

ES6 transformation not working #26

Open martintietz opened 9 years ago

martintietz commented 9 years ago

Using this example file test.jsx:

class TestClass {
    testoutput() {
        console.log('Some text...');
    }
};

module.exports = TestClass;

Trying to require test.jsx from inside another file ...

require('node-jsx').install({ extension: '.jsx', harmony: true });

var test = require('./test.jsx');

test.testoutput();

... gives me the following error:

test.testoutput();
     ^
TypeError: undefined is not a function
Jpunt commented 9 years ago

This doesn't work for me either:

// app.js
require('node-jsx').install({ extension: '.jsx', harmony: true });
require('es6-component');

// es6-component.jsx
var ES6Component = React.createClass({
  render() {
    return (<div></div>);
  }
});

Results in:

  render() {
        ^
SyntaxError: Unexpected token (
gpbl commented 9 years ago

I believe you need to require a .jsx in another module:

require('node-jsx').install({ extension: '.jsx', harmony: true });
require('./app');

// app.js
var test = require('./test.jsx');
test.testoutput();

does it work?

Jpunt commented 9 years ago

Are you referring to @martintietz's example or mine? I've made mine a bit more clear. It should be possible this way, right?

gpbl commented 9 years ago

Both :) Now you require a .jsx in the same module where require('node-jsx').install is placed. I think the "new" require is not yet enabled. Try, instead, to require another "normal" js module, into which you require the .jsx file (as in my example). I remember I had a similar issue i solved this way.

Jpunt commented 9 years ago

I don't get it. I require/install node-jsx from the root level in which I include some jsx later on. See this branch of my example of how I did this. This should work, right?

artisonian commented 9 years ago

Both examples cited have syntax errors. See my gist for corrections.

Jpunt commented 9 years ago

Ah, that makes sense. I'll try it out shortly, thanks! Can't wait for 0.13 to get out of beta though :)

Jpunt commented 9 years ago

Writing it the way you've explained, this refers to an empty object instead of the class it initiates (I'm working with fluxible, so I need to get the context from there). I guess I'll wait for 0.13 for proper ES6-support. Thanks anyway!

Jpunt commented 9 years ago

FYI: Babel.js saved the day for me: https://github.com/Jpunt/fluxible-offline