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

Question

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);
});

Solution 1

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.

Solution 2

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);
});

Solution 3

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

Solution 4

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');

Solution 5

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"]   
}

View more solutions

Comments

[Felix Kling]

Actually, babel/register will compile modules on the fly (but of course not the module it is located in).

[Filip Spiridonov]

Use require('babel-core/register') with Babel 6

[Cory Robinson]

THANK YOU for posting! You solved my problem i've had for 2 days now! The documentation for babel is terrible!

[XåpplI'-I0llwlg'I -]

@FilipSpiridonov It's now require('babel-register').

[aw04]

note it does say not to use this (babel-node) in production

[skwidbreth]

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!!!

[swyx]

it's now require(@babel/register)

[radzak]

@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?

[polkovnikov.ph]

It doesn't even work without a whole bunch of parameters and jumping through the hoops, so look for the answer below.