React Serverside rendering Unexpected Token, JSX and Babel

Question

I'm having trouble finding the right way to use babel so that I can use jsx on servers.

Node -jsx is deprecated for babel. It seems babel-core/register is what should be used, but I'm still getting unexpected token issues.

I created a repo with im problem having.

https://github.com/pk1m/Stackoverflow-helpme

When I run the node app or npm run watch-js , I get an unexpected token referencing JSX code '<'.

How can I get babel to override JSX, or am I completely disabled, thanks.

Answer 1

You need to use babel/register ( npm i babel --save ). And run on your server:

 require('babel/register')({ stage: 0 }); 

You can omit step 0 if you are not using the experimental babel functions. You can also use these options in .babelrc .

Please note that it will only work for files required after it is called (so that this will not affect the file in which you included it).

You can also have presets and other parameters in the .babelrc file.

For babel 6x :

 npm i babel-core babel-preset-es2015 babel-preset-react --save require('babel-core/register')({ presets: ['es2015', 'react'] }); 

Note: There are also presets in step 0-2.

To see how you wrote in your package. json, you can try the CLI command, as in one facebook suggested in the note here (or use the web package):

 babel --presets react es2015 --watch app/ --out-dir build/