Gulp babel not transpiling to es5 #167

vincentGustav · 2018-11-07T21:40:52Z

I installed gulp babel (and dependencies) and when running gulp, same es6 code is being output in dist. I tried adding .babelrc to specify preset as well as specifying preset in gulp.

Is there anything I am missing?

gulpfile

var gulp         = require('gulp');
var babel        = require('gulp-babel');

gulp.task( 'customJS', function() {
    gulp.src( [ jsCustomSRC ] )
        .pipe( concat( jsCustomFile + '.js' ) )
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe( gulp.dest( jsDestination ) )
});

.babelrc

{
  "presets": ["@babel/env"]
}

package.json

  "devDependencies": {
    "@babel/core": "^7.1.5",
    "@babel/preset-env": "^7.1.5",
    "gulp": "^4.0.0",
    "gulp-babel": "^8.0.0",
    "gulp-concat": "^2.5.2"
  }

The text was updated successfully, but these errors were encountered:

Extarys · 2018-11-13T22:55:40Z

I have the same issue I got no files being created nor do I get any error by the task where babel runs.

For completeness I've include my code below.

packages.js

  "@babel/cli": "^7.1.5",
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-stage-1": "^7.0.0", // Deprecated?
    "@babel/traverse": "^7.1.4",
    "gulp": "^3.9.1",
    "gulp-babel": "^8.0.0",
    "gulp-nodemon": "^2.4.1",
    "gulp-sass": "^4.0.2",
    "nodemon": "^1.11.0",

Task:

var DEST = 'build/'

gulp.task('build', () => {
  return gulp
    .src(['./src/**/*.js'])
    .pipe(
      babel({
        presets: ['@babel/preset-env']
      })
    )
    .pipe(gulp.dest(DEST))
})

philwolstenholme · 2018-11-27T18:21:04Z

I'm also seeing this behaviour with a similar setup to @vincentGustav's.

Hamik25 · 2018-12-04T14:22:00Z

I'm also have this issue to @vincentGustav .

ArnoMandersTfe · 2018-12-20T10:47:38Z

I also had this probleem but wrapping it in a second array will fix it,

.pipe($.babel({
    presets: [['@babel/preset-env']]
}))

superted17 · 2018-12-30T16:56:12Z

I experienced the same issue and could not get this working, even with the solution @ArnoMandersTfe has kindly provided.

Here is a Stack Overflow thread on this problem: https://stackoverflow.com/questions/52599370/gulp-babel-dont-produce-any-output-file-or-doesnt-work-properly

I could only get gulp-babel to work by using the Babel 6 install as outlined in the readme

operapreneur · 2019-01-12T22:52:10Z

@vincentGustav I have a similar setup and I was able to resolve the issue by replacing the @babel/env in both the gulpfile and .babelrc with @babel/preset-env

thucxuong · 2019-03-06T04:00:29Z

The reason is because of the preset and installed dependency is wrong.
This error is not logged out so a lot of dev do not know

{ Error: Cannot find module 'babel-preset-env' from '/Users/xuongluuthich/Code/src-static'
- Did you mean "@babel/env"?
    at Function.module.exports [as sync] (/Users/xuongluuthich/Code/src-static/node_modules/resolve/lib/sync.js:58:15)
    at resolveStandardizedName (/Users/xuongluuthich/Code/src-static/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePreset (/Users/xuongluuthich/Code/src-static/node_modules/@babel/core/lib/config/files/plugins.js:58:10)
    at loadPreset (/Users/xuongluuthich/Code/src-static/node_modules/@babel/core/lib/config/files/plugins.js:77:20)
    at createDescriptor (/Users/xuongluuthich/Code/src-static/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at items.map (/Users/xuongluuthich/Code/src-static/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/xuongluuthich/Code/src-static/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/Users/xuongluuthich/Code/src-static/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/Users/xuongluuthich/Code/src-static/node_modules/@babel/core/lib/config/config-descriptors.js:47:19) code: 'MODULE_NOT_FOUND' }

You need to install babel-preset-env
yarn add -D babel-preset-env
And in the configuration, the preset name should be
@babel/env

MaheshSasidharan · 2019-03-06T19:15:45Z

Was anyone able to find a solution? The above merge updated from @babel/env to the new @babel/preset-env

Which is what I have been using, but I still get just a minified file with all require lines in it.

gulpfile.js

const gulp = require("gulp");
const babel = require("gulp-babel");
const sourcemaps = require("gulp-sourcemaps");
const uglify = require("gulp-uglify-es").default;
const concat = require("gulp-concat");

gulp.task("buildjs", () => {
  return gulp.src(paths.js.source)
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(concat(paths.build.destMinJSFileName))
    .pipe(babel())
    .pipe(uglify())
    .pipe(sourcemaps.write(paths.build.destMapFolder))
    .pipe(gulp.dest(paths.build.destBuildFolder));
});

.babelrc

{
    "presets": ["@babel/preset-env"]
}

package.json

"@babel/core": "^7.3.4",
"@babel/polyfill": "^7.2.5",
"gulp": "^4.0.0",
"gulp-concat": "^2.5.2",
"gulp-sourcemaps": "^1.5.2",
"gulp-uglify-es": "^1.0.4"

entry.js (paths.js.source)

require("@babel/polyfill");
require("./main")

bundle.min.js (actual output)

"use strict";require("@babel/polyfill"),require("./main")
//# sourceMappingURL=maps/bundle.min.js.map

aminimalanimal · 2019-04-24T22:42:54Z

I too could only get gulp-babel to work by using the Babel 6 install as outlined in the readme:

$ npm install --save-dev gulp-babel@7 babel-core babel-preset-env

With this, you'll have presets: ['babel-preset-env'].

bluebrown · 2019-06-17T16:13:43Z

I have these issues as well. Gulp doesn't seem to use preset-env. I tried multiple variations with @babel/env, babel-preset-env & @babel/preset-env.

For some reason it seems to work now. I was using windows 10 earlier. Now I am home and use fedora.
I did some changes to the project though. Maybe I just found the right combination. I think I had this before but still.

I just thought, maybe it is the node version I am using; 10.16.0. Pretty sure I have 12 installed on the windows machine. Even tho in electron itself it is 12 again!? Now I'm confused.

Here it is, maybe its useful to someone:

package.json

  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0"
  },

gulp

const transpileJSX = () => gulp.src([
  './App.jsx',
  './components/*.jsx',
]).
    pipe(babel({
      plugins: [
        '@babel/proposal-class-properties',
      ],
      presets: [
        '@babel/preset-react',
        '@babel/preset-env',
      ],
    })).
    pipe(gulp.dest('./preload/react-app/'));

cbratschi · 2019-08-26T15:11:14Z

No output here too on some files. Tried to downgrade gulp-babel but dependencies were broken.

cbratschi · 2019-08-26T15:39:56Z

Modified the gulp-babel code and logged the error on console. There was a JavaScript parsing error in babel in my case.

The this.emit(error) call is not output to console nor does it interrupt the gulp processing. This is not ideal for analyzing issues.

kyle-jorve · 2019-09-19T01:01:08Z

Has anyone figured this problem out yet? I'm also getting ES6 output from using gulp-babel.

package.json:

"babel": {
"presets": [
"@babel/preset-env"
]
},
"browserslist": [
"last 2 versions",
"> 2%",
"IE 11"
],
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.6.0",
"@babel/preset-env": "^7.6.0",
"del": "^5.1.0",
"fs": "0.0.1-security",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.0",
"gulp-babel": "^8.0.0",
"gulp-concat": "^2.6.1",
"gulp-gzip": "^1.4.2",
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.2",
"gulp-uglify": "^3.0.2",
"gulp-uglifycss": "^1.1.0"
},
"dependencies": {}

gulp.js:

const gulp = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const fs = require('fs');
const babel = require('gulp-babel');
const rename = require('gulp-rename');

const config = {
bundleSrc: ['src/scripts/dependencies/.js', 'src/scripts/sources/bundle/.js'],
perPageScripts: 'src/scripts/sources/',
sassBundleSrc: 'src/sass/base/**/*.scss',
sassThemeSrc: 'src/sass/themes/'
};

function buildBundle() {
return gulp.src(config.bundleSrc)
.pipe(babel())
.pipe(uglify())
.pipe(concat('bundle.min.js'))
.pipe(gulp.dest('wwwroot/js'));
}

function buildPageScripts(done) {
fs.readdir(config.perPageScripts, function (err, items) {
items.map(function (item) {
if (fs.lstatSync(config.perPageScripts + item).isDirectory()) {
if (item !== 'bundle') {
gulp.src(config.perPageScripts+ item +'\*.js')
.pipe(babel())
.pipe(uglify())
.pipe(rename(path => {
path.dirname = '';
}))
.pipe(gulp.dest('wwwroot/js'));
}

        } else {
            gulp.src(config.perPageScripts + item)
                .pipe(babel())
                .pipe(uglify())
                .pipe(gulp.dest('wwwroot/js'));
        }
    });
});

done();

}

And in the output I still get things like node.closest() and Array.from(). Halp!

kyle-jorve · 2019-09-19T01:08:31Z

Wow I really don't know why my comment looks all janky like that. Sorry guys! I tried to fix it...

nunospot · 2019-09-23T18:08:17Z

Still not working.

PACKAGE.JSON

"devDependencies": {
    "@babel/core": "^7.6.0",
    "@babel/polyfill": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "del": "^3.0.0",
    "gulp": "3.9.1",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-babel": "^8.0.0",
    "gulp-clone": "^2.0.1",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.2",
    "gulp-eslint": "^4.0.0",
    "gulp-merge": "^0.1.1",
    "gulp-plumber": "^1.2.1",
    "gulp-rename": "^1.4.0",
    "gulp-replace": "^1.0.0",
    "gulp-sequence": "1.0.0",
    "gulp-uglify": "^3.0.1",
    "gulp-watch": "5.0.1",
  }

TASK

gulp.src(themeScripts)
	.pipe(babel({
		"presets": [
			[
				"@babel/preset-env",
				{
					"targets": {
						"browsers": [
							"last 2 version",
							"> 1%",
							"ie 10",
							"safari >= 7"
						]
					}
				}
			]
		]
	}))
	.pipe(concat('theme.min.js'))
	.pipe(uglify())
	.pipe(gulp.dest(paths.js));

Excerpt that was not transpiled

{key:"sendRequest",value:function(e){return new Promise(function(t,n){var i=new XMLHttpRequest;i.open("GET",e,!0),i.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),i.onload=function(){if(200!=i.status)n({status:i.status,statusText:i.statusText});else if(""=="".concat(i.response))n({status:i.status,statusText:"empty response"});else{var e=JSON.parse("".concat(i.response));t(e)}},i.onerror=function(){n({status:i.status,statusText:i.statusText})},i.send()})}}

The Promisse should be transpiled to ie10, since are one of my target.

danyj · 2019-10-04T00:36:55Z

Same here, using webpack 4 + babel-loader with same dependencies works out of the box, gulp-babel is a no go for any version/presets/plugins combinations. Files get moved to dest but they are not transpilled . No errors either.

samvk · 2019-10-31T16:02:38Z

For us it turned out the issue wasn't directly related to gulp-babel, but that our browserslist was no longer transpilling down for IE11 (which has now hit <2%) so most ES6 features (arrow function, etc.) were correctly being left alone.

mkstix6 · 2019-12-11T13:17:47Z

I'm struggling to get gulp-babel to do a simple transpile a file with occurrences of String.prototype.includes.

I would be grateful to see a recipe that transpiles String.prototype.includes for:
gulp@^4
gulp-babel@^8
@babel/core@^7
@babel/preset-env@^7

I've tried adding the babel preset and a browserslist but the output from the transpile is a file that still has .includes and I can see no presence of a polyfill.

.browserslistrc

IE 11
> 0.25%
not dead

ghost · 2020-01-28T16:04:51Z

Thought I'd leave my two cents in here. Started a nearly bearbones project and gulp-babel refuses to do anything. Every other step in my gulp pipeline operates successfully, only the babel() command doesn't do anything, even though I'm using @babel/preset-env @ ^7.8.3 with @babel/core @ ^7.8.3 and core-js @ ^3.6.4 for use with preset-env. Here's my .babelrc in the root of my project:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "node": "8.0", // I'm building a CLI
                    "browsers": "ie > 4" // Just added this to test if it would actually change anything
                },
                "useBuiltIns": "entry",
                "corejs": {
                    "version": 3,
                    "shippedProposals": true,
                    "proposals": true
                }
            }
        ]
    ]
}

The suggestion to switch to babel-preset-env above is misleading since that module has been depracted and migrated to @babel/preset-env, and I want to use babel 7 to transpile all my javascript code.
This is my gulpfile.js:

const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify-es').default;
const pipeline = require('readable-stream').pipeline;
const concat = require('gulp-concat');

gulp.task('build', function() {
    return pipeline(
        gulp.src('./src/*.js'),
        concat('lib.js', { newLine: '\r\n' }),
        babel(),
        // Skipping minification for checking gulp-babel's output
        gulp.dest('./lib/')
    );
});

I know that maintaining these open-source projects for no money whatsoever is a pain in the ass, but there are a lot of people that are relying on this module for their projects. I believe we'd all greatly appreciate a fix, or at least start logging the errors in the code ;)

irbian · 2020-02-28T11:24:31Z

Ok, don´t know if it´s of any help but I can share my debug process

.pipe(babel()) with a babel.config.js, didn´t work
.pipe(babel()) with a babel.config.json, didn´t work
.pipe(babel({ presets: ['@babel/preset-env'] })) did something
.pipe(babel({ presets: [['@babel/preset-env', { "useBuiltIns": "usage", "core": "3.6" }]] })) didn´t work
.pipe(babel({ presets: [['@babel/preset-env', { "useBuiltIns": "usage", "corejs": "3.6" }]] })) did something
.pipe(babel()) with a babel.config.json (with corejs instead of core) did something
.pipe(babel()) with a babel.config.js (with corejs instead of core) did something

So... I don´t know where the I got the core property? And another issue is ¿why it doesn´t show any message?

lpcaldeira · 2020-04-29T02:35:36Z

npm update solve it for me :)

jackcylin · 2021-10-12T04:07:16Z

yarn add -D @babel/preset-env work for me

timocouckuyt · 2023-07-27T20:36:01Z

.pipe(babel({ presets: [['@babel/preset-env', { "useBuiltIns": "usage", "corejs": "3.6" }]] }))

Worked here, but babel added some require('s at the start of the file, which is why I see it worked, so I pressume you'll need to get rollup in the mix to resolve the requires?

operapreneur mentioned this issue Jan 12, 2019

fix preset reference in README #177

Merged

ghost mentioned this issue Jan 28, 2020

ES5 transpiling issue, No output at all #195

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gulp babel not transpiling to es5 #167

Gulp babel not transpiling to es5 #167

vincentGustav commented Nov 7, 2018

Extarys commented Nov 13, 2018 •

edited

philwolstenholme commented Nov 27, 2018

Hamik25 commented Dec 4, 2018

ArnoMandersTfe commented Dec 20, 2018

superted17 commented Dec 30, 2018

operapreneur commented Jan 12, 2019

thucxuong commented Mar 6, 2019 •

edited

MaheshSasidharan commented Mar 6, 2019 •

edited

aminimalanimal commented Apr 24, 2019

bluebrown commented Jun 17, 2019 •

edited

cbratschi commented Aug 26, 2019

cbratschi commented Aug 26, 2019

kyle-jorve commented Sep 19, 2019 •

edited

kyle-jorve commented Sep 19, 2019

nunospot commented Sep 23, 2019

danyj commented Oct 4, 2019

samvk commented Oct 31, 2019 •

edited

mkstix6 commented Dec 11, 2019

ghost commented Jan 28, 2020

irbian commented Feb 28, 2020

lpcaldeira commented Apr 29, 2020

jackcylin commented Oct 12, 2021

timocouckuyt commented Jul 27, 2023

Gulp babel not transpiling to es5 #167

Gulp babel not transpiling to es5 #167

Comments

vincentGustav commented Nov 7, 2018

Extarys commented Nov 13, 2018 • edited

philwolstenholme commented Nov 27, 2018

Hamik25 commented Dec 4, 2018

ArnoMandersTfe commented Dec 20, 2018

superted17 commented Dec 30, 2018

operapreneur commented Jan 12, 2019

thucxuong commented Mar 6, 2019 • edited

MaheshSasidharan commented Mar 6, 2019 • edited

aminimalanimal commented Apr 24, 2019

bluebrown commented Jun 17, 2019 • edited

package.json

gulp

cbratschi commented Aug 26, 2019

cbratschi commented Aug 26, 2019

kyle-jorve commented Sep 19, 2019 • edited

package.json:

gulp.js:

kyle-jorve commented Sep 19, 2019

nunospot commented Sep 23, 2019

danyj commented Oct 4, 2019

samvk commented Oct 31, 2019 • edited

mkstix6 commented Dec 11, 2019

ghost commented Jan 28, 2020

irbian commented Feb 28, 2020

lpcaldeira commented Apr 29, 2020

jackcylin commented Oct 12, 2021

timocouckuyt commented Jul 27, 2023

Extarys commented Nov 13, 2018 •

edited

thucxuong commented Mar 6, 2019 •

edited

MaheshSasidharan commented Mar 6, 2019 •

edited

bluebrown commented Jun 17, 2019 •

edited

kyle-jorve commented Sep 19, 2019 •

edited

samvk commented Oct 31, 2019 •

edited