How to fix "cannot find module 'gulp-babel'"?

Question

I was learning JS by the book "Learning JavaScript. 3rd Edition" And when it came to transpilers and I did everything exactly like in the book, I still got an error when I type gulp in Bash. Is there anything that I can do to fix it?

Tried installing @babel/core, babel-env Tried minor changes in gulpfile.js Searched the internet but couldn't find the answer...

package.json

"author": "",
"license": "ISC",
"dependencies": {
"underscore": "^1.9.1"
},
"devDependencies": {
 "@babel/cli": "^7.5.5",
 "@babel/core": "^7.5.5",
 "@babel/preset-env": "^7.5.5",
 "babel": "^6.23.0",
 "babel-preset-es2015": "^6.24.1",
 "gulp": "^4.0.2",
 "gulp-babel": "^8.0.0"
 }
 }

gulpfile.js

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

gulp.task('default', function() {

 gulp.src("es6/**/*.js")
    .pipe(babel({
        presets: ['@babael/env']
        }))
    .pipe(gulp.dest("dist"));

gulp.src("public/es6/**/*.js")
    .pipe(babel())
    .pipe(gulp.dest("public/dist"))
});

babelrc

{ 
"presets": ["es2015"]
}

error is: internal/modules/cjs/loader.js:628 throw err; ^

Error: Cannot find module 'gulp-babel'
Require stack:
- C:\Users\archi\test\lj\gulpfile.js
- C:\Users\archi\AppData\Roaming\npm\node_modules\gulp- 
  cli\lib\versioned\^4.0.0\index.js
- C:\Users\archi\AppData\Roaming\npm\node_modules\gulp-cli\index.js
- C:\Users\archi\AppData\Roaming\npm\node_modules\gulp-cli\bin\gulp.js
at Function.Module._resolveFilename 
(internal/modules/cjs/loader.js:625:15)
at Function.Module._load (internal/modules/cjs/loader.js:527:27)
at Module.require (internal/modules/cjs/loader.js:683:19)
at require (internal/modules/cjs/helpers.js:16:16)
at Object.<anonymous> (C:\Users\archi\test\lj\gulpfile.js:2:15)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:643:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:683:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\archi\\test\\lj\\gulpfile.js',
'C:\\Users\\archi\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\lib\\versioned\\^4.0.0\\index.js',
'C:\\Users\\archi\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\index.js',
'C:\\Users\\archi\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\bin\\gulp.js'
]
}

Answer 1

Follow the steps below, the tasks in the gulp file will run successfully (without warnings):

1. Install gulp-babel, babel-core and preset-env

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

2. Modify .babelrc as follows:

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

3. Add a callback to the gulp task

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

gulp.task('default', function(callback) {
    // Node source
    gulp.src("es6/**/*.js")
        .pipe(babel())
        .pipe(gulp.dest("dist"));

    // browser source
    gulp.src("public/es6/**/*.js")
        .pipe(babel())
        .pipe(gulp.dest("public/dist"));
    
    callback();
});

Answer 2

your need babel core:

Using npm:

npm install --save-dev @babel/core

With yarn:

yarn add @babel/core --dev