Gulp 4 Upgrade gives Error: Received a non-Vinyl object in `dest()`

Question

I have recently upgraded the gulp to version 4.0.0 and after that I receive this error

Error: Received a non-Vinyl object in `dest()`

npm version: 9.8.0 node version: 20.5.1 gulp version: 4.0.2

My gulp file looks like this

 var gulp = require('gulp');
 var gutil = require('gulp-util');
 var source = require('vinyl-source-stream');
 var browserify = require('browserify');
 var reactify = require('reactify');
 var watchify = require('watchify');
 var watchLess = require('gulp-watch-less');
 var less = require('gulp-less');
 var minifyCSS = require('gulp-cssnano');
 
 var path = {
     MINIFIED_OUT: 'bundle.min.js',
     NON_MINIFIED_OUT: 'bundle.js',
     DEST_BUILD: './js/',
     ENTRY_POINT: './js/App.js',
     LESS: './css/*.less',
     CSS_DEST: './',
 };
 
 gulp.task('build-app', function () {
     browserify({
         entries: [path.ENTRY_POINT],
         transform: [reactify]
     })
         .bundle()
         .pipe(source(path.NON_MINIFIED_OUT))
         .pipe(gulp.dest(path.DEST_BUILD));
 });
 
 gulp.task('build-less', function () {
     return gulp.src(['./css/less/main.less'])
         .pipe(less())
         .pipe(minifyCSS())
         .pipe(gulp.dest('./css'));
 });
 
 gulp.task('watch-app', function () {
     var bundler = browserify({
         entries: path.ENTRY_POINT,
         transform: [reactify],
         debug: true,
         cache: {},
         packageCache: {},
         fullPaths: true
     });
 
     var watcher = watchify(bundler);
 
     var rebundle = function () {
         var start = Date.now();
 
         watcher.bundle()
             .on('error', gutil.log.bind(gutil, 'Browserify Error'))
             .pipe(source(path.NON_MINIFIED_OUT))
             .pipe(gulp.dest(path.DEST_BUILD));
 
         gutil.log('[browserify]', 'rebundle took ', gutil.colors.cyan(new Date().getTime() - start + ' ms'));
     };
 
     watcher.on('update', rebundle);
 
     // Run initial bundle manually
     rebundle();
 
     return watcher;
 });
 
 gulp.task('watch-less', function () {
     gulp.src(['./css/less/main.less'])
         .pipe(less())
         .pipe(minifyCSS())
         .pipe(gulp.dest('./css'));
 
     gulp.watch('./css/less/*.less', function () {
         gulp.src(['./css/less/main.less'])
             .pipe(less())
             .pipe(minifyCSS())
             .pipe(gulp.dest('./css'));
     });
 });
 
 gulp.task('default', gulp.series('watch-app', 'watch-less'));

I have searched previous questions but I could not find a solution that works.

I have deleted the package-lock.json and node_modules folder and ran npm install after that and yet it gives this error when I run gulp

Can anyone please have a look and let me know what needs to be done to fix this issue.