require('babel/register') doesn't work
Javascriptnode.jsExpressEcmascript 6BabeljsJavascript Problem Overview
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);
});
Javascript Solutions
Solution 1 - Javascript
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 2 - Javascript
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 3 - Javascript
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 - Javascript
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
npm install @babel/register @babel/core @babel/preset-env
- Create a file
pre-index.js
with attached contents - Run
node pre-index
You can use import
s and other features only in index.js
and files it import
s or require
s.
require('@babel/register')({
presets: [
[
"@babel/preset-env",
{
targets: {
node: "current"
}
}
]
]
});
require('./index.js');
Solution 5 - Javascript
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"]
}
Solution 6 - Javascript
steps to fix this:
-
remove
require('babel/register');
from server.js -
create another entry file called start.js
-
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"]
}
Solution 7 - Javascript
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");
Solution 8 - Javascript
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.