petehunt / node-jsx

transparently require() jsx from within node

deprecated -- use babel

node-jsx's Issues

Deprecate in favor of babel

I intend on deprecating this repo in favor of https://babeljs.io/docs/usage/require/. If anyone has concerns about this please raise them here before I pull the trigger.

Make .jsx the default extension

I was debugging why my node.js app took several seconds to boot and finally found the culprit to be that having:

    require('node-jsx').install();

as first line of the app made all the subsequent require calls to go through React.transform.
My app starts now almost immediately after changing my React components to use .jsx extension and memory usage is 1/3 of original :)

README could possibly warn about this or .jsx could be set as default extension to prevent similar cases.

node-jsx in production

Is it a good idea to use node-jsx in production or better to pre-compile the files?

work with typescript

it is the best for ssr. i changed it for work with new jsx format where not need import react from react. but can it work with typescript? may be i can also change it?

Support .jsx

What do you think if node-jsx can handle files with .jsx extensions?

Compatibility with webpack for server-side-rendering

I'm creating an isomorphic React app with Express4 and Webpack, and I'm trying to include css files using the Webpack method of requiring them in my components (as per this loader). Unfortunately, on the server-side, node-jsx is attempting to transform the components, and throws an error if they include css:

Error: Error transforming [component/style.css] to JSX: Error: Parse Error: Line 1: Unexpected token .

This is a real pain in the butt.

not working for .jsx (anymore?)

A very simple setup:

var path = require("path");
var express = require("express");

var app = express();
require('node-jsx').install({ extension: '.jsx' })
require('source-map-support').install();

var React = require("react");
var PageHome = React.createFactory(require("../components/PageHome/PageHome.jsx"));

In theory requiring the jsx should transform it but I am getting an error:

..../app/components/PageHome/PageHome.jsx.js:6
  <div>
  ^
  SyntaxError: Unexpected token <

The jsx should be fine though:

var React = require('react');

var Home = React.createClass({
  render: function() {
    return (
      <div>
        <h1>Home!!</h1>
      </div>
    );
  }
});

module.exports = Home;

The dependencies are minimal

"dependencies": {
  "node-jsx": "^0.12.4",
  "source-map-support": "^0.2.10",
  "express": "^4.12.3",
  "react": "^0.13.1"
}

Poking into node-jsx it seems like the require extensions are not being called at all. https://github.com/petehunt/node-jsx/blob/master/index.js#L17

I am really not sure what's going on. Any thoughts?

$ node --version
v0.12.0
$ npm -version
2.5.1

Publish to NPM

Have to use a Git reference in my project's package.json.

Error loading acorn

The following code:

require('node-jsx').install();
var acorn = require('acorn');

Results in:

/Users/forbeslindesay/Documents/GitHub/temp/node_modules/acorn/dist/acorn.js:2981
  _classCallCheck(this, TokContext);
                        ^
ReferenceError: TokContext is not defined
    at new TokContext (/Users/forbeslindesay/Documents/GitHub/temp/node_modules/acorn/dist/acorn.js:2981:25)
    at Object.15../state (/Users/forbeslindesay/Documents/GitHub/temp/node_modules/acorn/dist/acorn.js:2990:11)
    at s (/Users/forbeslindesay/Documents/GitHub/temp/node_modules/acorn/dist/acorn.js:1:681)
    at /Users/forbeslindesay/Documents/GitHub/temp/node_modules/acorn/dist/acorn.js:1:732
    at Object.1../expression (/Users/forbeslindesay/Documents/GitHub/temp/node_modules/acorn/dist/acorn.js:78:21)
    at s (/Users/forbeslindesay/Documents/GitHub/temp/node_modules/acorn/dist/acorn.js:1:681)
    at e (/Users/forbeslindesay/Documents/GitHub/temp/node_modules/acorn/dist/acorn.js:1:852)
    at /Users/forbeslindesay/Documents/GitHub/temp/node_modules/acorn/dist/acorn.js:1:870
    at a (/Users/forbeslindesay/Documents/GitHub/temp/node_modules/acorn/dist/acorn.js:1:150)
    at Object.<anonymous> (/Users/forbeslindesay/Documents/GitHub/temp/node_modules/acorn/dist/acorn.js:1:383)

but

var acorn = require('acorn');

works fine.

See pugjs/pug#1925

Options is not used until node-jsx is required.

If node-jsx is required after example Express, all express files will be checked by node-jsx but without options. So require node-jsx before express, otherwise will it take some extra time to start node / express.

Wrong:

var express = require('express'), // node-jsx options is empty here
    fs = require('fs'), // node-jsx options is empty here
    passport = require('passport'), // node-jsx options is empty here
    nodeJSX = require('node-jsx').install({extension: '.jsx'}); // It's here the options starts to take action and only jsx will be checked.

Right:

var nodeJSX = require('node-jsx').install({extension: '.jsx'}),
    express = require('express'),
    fs = require('fs'),
    passport = require('passport');

Not a big deal, but maybe something we should add to the readme ?

React dependency

Hi Pete. Cool package!
Shouldn't we use a peer dependency for react-tools in this package ?
or maybe use "react-tools": "0.x" notation to make it more flexible

How do you recompile JSX files in development?

We're doing an isomorphic app but it seems whenever I change the JSX file only the client sees the changes. How does node-jsx handle changes on the server? Is there a way to reload the JSX file without restarting the server?

Support `.react.js` ext

Test not passing

I'm getting

Error: Lower case component names (jonx) are no longer supported in JSX

ES6 transformation not working

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

node-jsx 0.12.2 doesn't honer the extension

@petehunt
0.12.2 doesn't honder the extension of js so if we set extension as jsx without having @jsx pragma the code will not being transform

Your commit for this fix the issue but seems the 0.12.3 doesn't publish to npm yet.
63a0904

The latest package show as
https://www.npmjs.org/package/node-jsx 0.12.2

Uncaught TypeError: Cannot set property '.jsx' of undefined

I know I must be missing something really basic here

I just added

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

to my index.js and changed some file extensions, but I get this type error during runtime.

Provide executable

Like node-jsx which would run node with compiler registered against needed extensions.

Support react-tools 0.13.x?

npm complains at

"dependencies": {
    "react-tools": "^0.12.1"
  },

Parse Error: Illegal return statement

Added require('node-jsx').install() to my app and getting Illegal return statement when it tries to parse node libs under node_modules/.

I'm guessing { extension: '.jsx' } fixes it but I don't think this should happen.

What's up?

Error: Error transforming /project/node_modules/express/node_modules/methods/index.js to JSX: Error: Parse Error: Line 9: Illegal return statement

express/node_modules/methods/index.js

var http = require('http');

if (http.METHODS) {
  module.exports = http.METHODS.map(function(method){
    return method.toLowerCase();
  });

  return;
}

Please create better documentation on main page

I know you may take it for granted and are seasoned at node + react, but on your main page can you explain the use case for this? I want to know what this gives me, not just how to use it. And being new to this, it's not that evident as you have no description and I cannot just infer by the usage why I should require jsx in my code for react. Just for newbies you need to have a little more explanation.

Transformation fails when it encounters a hashbang

If I try to use my-local-ip (which starts with #! /usr/bin/env node), I get this error:

Error: Error transforming /Users/screencasting/Desktop/ambidex-example/node_modules/my-local-ip/index.js to JSX: Error: Parse Error: Line 1: Unexpected token ILLEGAL
    at Object.require.extensions.(anonymous function) [as .js] (/Users/screencasting/Desktop/ambidex-example/node_modules/node-jsx/index.js:24:13)
    at Module.load (module.js:349:32)
    at Function.Module._load (module.js:305:12)
    at Module.require (module.js:357:17)
    at require (module.js:373:17)
    at Ambidex._startServingWebpack (/Users/screencasting/Desktop/ambidex-example/node_modules/Ambidex/src/Ambidex.server.js:601:16)
    at Ambidex._startServing (/Users/screencasting/Desktop/ambidex-example/node_modules/Ambidex/src/Ambidex.server.js:490:12)
    at Ambidex.<anonymous> (/Users/screencasting/Desktop/ambidex-example/node_modules/Ambidex/src/Ambidex.server.js:86:21)

@dominictarr thinks you should have a regex to filter out hashbangs before transformation.

issue transforming jsx when using node-fibers

I am building an isomorphic site using Fluxxor and React. Using node-jsx for the transforms and it works very well. Just having an issue though now as I have installed node-fibers to try to get around the issue of async data not populating server side on load. facebook/react#1739

node-fibers does not seem to work well with node-jsx though. I get the following error:

Error: Error transforming /var/www/nodeapp/node_modules/fibers/fibers.js to JSX: Error: Parse Error: Line 2: Illegal return statement at Object.require.extensions.(anonymous function) as .js