54

I have isomorphic app written in ES6 on client with Babel transpiler. I want my express server to have the same ES6 syntax as client code.

Unfortunately require('babel/register') doesn't work..

server.js

require('babel/register'); // doesn't work
// require('babel-core/register); doesn't work..

const env = process.env.NODE_ENV || 'development';
const port = process.env.NODE_PORT || 1995;

const http = require('http');
const express = require('express');
const address = require('network-address');

let app = express();

app.set('port', port);
app.use(express.static(path.join(__dirname, 'public')));

app.get('*', (req, res) => {
   res.send('Hello!');
});

http.createServer(app).listen(app.get('port'), function () {
   console.info('Demo app is listening on "%s:%s" env="%s"', address(), app.get('port'), env);
});
1
  • What are you using babel/register for here? Mar 23, 2015 at 15:34

8 Answers 8

48

Since Babel 6 use babel-register hook to make on-the-fly transpilation.

First:

 npm install babel-register

Then require it with:

require('babel-register');    
// not using 
// require('babel/register');
// or 
// require('babel-core/register);

To Convert your Ecmascript 6 code to ecmascript 5, you must set Babel presets option with require babel-register Like this:

require('babel-register')({
  presets: [ 'es2015' ]
});

Unlike the answer of @alexander-pustovalov you do not need to .babelrc file.

you must also install babel-preset-es2015:

npm install babel-preset-es2015

Finally your Server.js file will be:

require('babel-register')({
   presets: [ 'es2015' ]
});

const env = process.env.NODE_ENV || 'development';
const port = process.env.NODE_PORT || 1995;

const http = require('http');
const express = require('express');
const address = require('network-address');

let app = express();

app.set('port', port);
app.use(express.static(path.join(__dirname, 'public')));

app.get('*', (req, res) => {
   res.send('Hello!');
});

http.createServer(app).listen(app.get('port'), function () {
   console.info('Demo app is listening on "%s:%s" env="%s"', address(), app.get('port'), env);
});
42

require('babel/register') doesn't transpile the file it is called from. If you want server.js to be included in on-the-fly transpilation, you should execute it with babel-node (Babel's CLI replacement for node).

See my answer here for an example.

5
  • 11
    Use require('babel-core/register') with Babel 6 Dec 24, 2015 at 21:54
  • 14
    @FilipSpiridonov It's now require('babel-register'). May 2, 2016 at 9:31
  • note it does say not to use this (babel-node) in production
    – aw04
    Apr 18, 2017 at 20:35
  • 6
    it's now require(@babel/register)
    – swyx
    Jul 1, 2018 at 18:10
  • It doesn't even work without a whole bunch of parameters and jumping through the hoops, so look for the answer below. Dec 23, 2018 at 14:12
9

I ran into a similar issue trying to render a react page (.jsx) on the server. I fixed it by putting the snippet below at the top of my server file

require('babel-register')({
    presets: ['es2015', 'react']
});

make sure you have npm babel-preset-es2015 and babel-preset-react installed

2
  • 4
    THANK YOU for posting! You solved my problem i've had for 2 days now! The documentation for babel is terrible! Feb 28, 2016 at 6:53
  • 1
    I was trying to use the pure require without the presets, and it was causing a syntax error originating from the .jsx component that I was trying to get onto the server... adding the presets option solved the problem, THANK YOU!!!
    – skwidbreth
    Jul 7, 2017 at 1:45
9

In the eve of 2019 we still have no good documentation in JS-related libraries, but, on the other hand, we have StackOverflow for that.

In order to use babel on Node.js, you need to

  1. npm install @babel/register @babel/core @babel/preset-env
  2. Create a file pre-index.js with attached contents
  3. Run node pre-index

You can use imports and other features only in index.js and files it imports or requires.

require('@babel/register')({
    presets: [
        [
            "@babel/preset-env",
            {
                targets: {
                    node: "current"
                }
            }
        ]
    ]
});
require('./index.js');
0
7

According to this document you have to use:

require("babel-register");

Additionally, you have to put .babelrc file in the root of directory from which you start server.

{
  "presets": ["es2015"]   
}
3

steps to fix this:

  1. remove require('babel/register'); from server.js
  2. create another entry file called start.js
  3. in start.js,

    require('babel/register'); module.exports = require('./server.js');

The result is that all code inside server.js will be transpiled on the fly by the register. Please make sure you have configured babel correctly with a .babelrc having the content like below

{
  "presets": ["es2015", "stage-0"]
}
-1

Since Babel 7 use, you can use @babel/register

npm install --save-dev @babel/core @babel/register

or

yarn add --dev @babel/core @babel/register

if you're using yarn.

In the code you just include the following line:

require("@babel/register");
1
  • @SebastianSchürmann could you elaborate on your downvote, I don't quite get what you mean by checking out the dependency to a local folder. He simply wanted to transpile the file the require("@babel/register") is called from, right?
    – radzak
    Sep 27, 2018 at 9:19
-4

You need to compile your code using Babel. Check out the docs from their website.

Install babel with npm install -g babel then do babel app.js > compiledApp.js to compile your ES6 code into ES5 code. You can then run compiledApp.js.

The runtime babel/register is still needed if your want to use some functions of ES6 like Object.assign which are not compiled but executed thanks to a polyfill. (Check here for examples and more details)

Edit: As said in the comment, you can use the register to compile on the fly. But it will compile modules you are requiring after this register. It will hook the require function from node. More here. You will still need to compile the file where the register or to not use any ES6 in this file.

1
  • 4
    Actually, babel/register will compile modules on the fly (but of course not the module it is located in). Mar 23, 2015 at 15:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.