Error: Couldn't find preset "es2015" relative to directory "/Users/username"
Javascriptnode.jsEcmascript 6GulpBabeljsJavascript Problem Overview
I get the following error when trying to use gulp-babel:
> Error: Couldn't find preset "es2015" relative to directory > "/Users/username"
I have the es2015 preset installed globally and locally so can't see why this would be an issue.
Below is my gulp set up and package.json.
var babel = require('gulp-babel');
var es2015 = require('babel-preset-es2015');
gulp.task('babel', function() {
return gulp.src('./app/main.js')
.pipe(babel({
presets: [es2015]
}))
.pipe(gulp.dest('dist'));
});
Package.json
"devDependencies": {
"babel-preset-es2015": "^6.3.13",
"babel-preset-es2015-node5": "^1.1.1",
"browser-sync": "^2.11.0",
"gulp": "^3.9.0",
"gulp-babel": "^6.1.1",
"gulp-stylus": "^2.2.0"
}
I am using node v5.1.0 and babel v6.4.0
Here is the terminal ouput
Javascript Solutions
Solution 1 - Javascript
You only need to install babel-preset-es2015
:
CLI usage example:
npm install babel-cli babel-preset-es2015
Solution 2 - Javascript
To fix this issue You should remove .babelrc (hidden) file from "/Users/username" directory.
Solution 3 - Javascript
the "es2015" in :
.pipe(babel({
presets: ['es2015']
}))
is actually a path - so if you don't have the preset in the /Users/username/es2015 directory you have to point exactly to it like for instance:
.pipe(babel({
presets: ['../../gulp/node_modules/babel-preset-es2015']
}))
it worked for me
Solution 4 - Javascript
I just used this exact gulpfile.js
var babel = require('gulp-babel');
var es2015 = require('babel-preset-es2015');
var gulp = require('gulp');
gulp.task('babel', function() {
return gulp.src('./app/main.js')
.pipe(babel({
presets: [es2015]
}))
.pipe(gulp.dest('dist'));
});
and it worked for me. I only installed babel
, babel-preset-es2015
and gulp-babel
.
Solution 5 - Javascript
Check if you have .babelrc file in the root folder of your Project. If not create .babelrc file and add the following:
{
"presets": ["es2015"]
}
It fixed the issue.
Solution 6 - Javascript
You could try installing es2015
and stage-2
via
npm i babel-preset-es2015 --save
npm i babel-preset-stage-2 --save
Solution 7 - Javascript
I encountered the same issue and it was because I had a .babelrc
file in the root of my directory.
To fix this add babelrc: false
inside the babel options:
var babel = require('gulp-babel');
gulp.task('babel', function() {
return gulp.src('./app/main.js')
.pipe(babel({
babelrc: false,
presets: ['babel-preset-es2015']
}))
.pipe(gulp.dest('dist'));
});
Solution 8 - Javascript
I had the same issue, and this second suggestion helped me noticing my problem and maybe it's yours too.
I npm install gulp-babel-es2015
then didn't include it in the gulpfile at all.
Then babel({presets: ['es2015']})
option is just a string as shown in the examples here https://www.npmjs.com/package/gulp-babel .
Here is my gulpfile.
var gulp = require('gulp'),
babel = require('gulp-babel');
gulp.task('babelify', () => {
gulp.src('js/*.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('alljs'));
});
gulp.task('default', ['babelify']);
Also, as from this issue here, https://github.com/laravel/elixir/issues/354
Suggestions are you should update node to version 5.x.x and npm to 3.x.x.
Solution 9 - Javascript
The situation where I encounter this problem is that I have moved the files from xxx
to xxx/server
. And then under xxx/server
I will see the Error: Couldn't find preset "es2015" relative to directory "/Users/username/xxx"
error.
The real reason is that I have forgotten to move that .babelrc
file under xxx
. And after I move that .babelrc
to xxx/server
, the error goes away.
Solution 10 - Javascript
I just had a really weird one. I installed all the babel tools with one big long npm install
command, and everything installed without errors... except it was throwing the error documented in this thread, at runtime.
I noticed the version was 0.0.0 in the package.json file, so I ran npm install --save-dev babel-preset-es2015
again and it worked and placed a SECOND key into my package.json file:
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2015": "0.0.0",
"babel-preset-stage-2": "^6.24.1",
"eslint": "^3.19.0"
}
I just removed the botched entry and it cleared up this relative to directory
error.
Solution 11 - Javascript
My problem was that other program was using a file involved in the compilation process (probably the .babelrc). Closing several apps solved my problem.
For me was Dropbox or even Brackets Editor with eqFTP extension.
Greetings
Solution 12 - Javascript
Babel 7 update
From the docs you should now use @babel/preset-env
instead of any other preset
mention
>The "env" preset has been out for more than a year now, and completely replaces some of the presets we've had/suggested earlier. > > * babel-preset-es2015 > * babel-preset-es2016 > * babel-preset-es2017 > * babel-preset-latest > * A combination of the above ^
yarn add @babel/preset-env
or
npm install @babel/preset-env