Gulp 4.0 version problem - parallel is not a function

Question

I need help with my gulp project. Drops me error in terminal: TypeError: parallel is not a function Already searched information whole internet. Answer is to update Gulp version to 4.0.. Already updated. still shows the "parallel function" issue My file:

const { src, dest, parallel, series, watch } = import('gulp');
const twig = import('gulp-twig');
const sass = import('gulp-sass');
const prefix = import('gulp-autoprefixer');
const data = import('gulp-data');
const sourcemaps = import('gulp-sourcemaps');
const concat = import('gulp-concat');
const plumber = import('gulp-plumber');
const browsersync = import('browser-sync');
const gulpcopy = import('gulp-copy');
const fs = import('fs');
const del = import('del');
const path = import('path');


var paths = {
    build: {
        html: 'dist/',
        js: 'dist/assets/js/',
        css: 'dist/assets/css/',
        img: 'dist/assets/img/',
        fonts: 'dist/assets/fonts/',
        icons: 'dist/assets/icons/',
        json: 'dist/assets/'
    },
    src: {
        html: 'src/*.{htm,html,php}',
        js: 'src/assets/js/*.js',
        css: 'src/assets/sass/style.scss',
        img: 'src/assets/img/**/*.*',
        fonts: 'src/assets/fonts/**/*.*',
        icons: 'src/assets/icons/**/*.*',
        json: 'src/assets/*.json'
    },
    watch: {
        html: 'src/**/*.{htm,html,php}',
        js: 'src/assets/js/**/*.js',
        css: 'src/assets/sass/**/*.scss',
        img: 'src/assets/img/**/*.*',
        fonts: 'src/assets/fonts/**/*.*',
        icons: 'src/assets/icons/**/*.*',
        json: 'src/assets/*.json'
    },
    clean: './dist'
};

// SCSS bundled into CSS task
function css() {
  return src('client/scss/vendors/*.scss')
    .pipe(sourcemaps.init())
    // Stay live and reload on error
    .pipe(plumber({
        handleError: function (err) {
            console.log(err);
            this.emit('end');
        }
    }))
    .pipe(sass({
        includePaths: [paths.src.css + 'vendors/'],
        outputStyle: 'compressed'
    }).on('error', function (err) {
        console.log(err.message);
        // sass.logError
        this.emit('end');
    }))
    .pipe(prefix(['last 15 versions','> 1%','ie 8','ie 7','iOS >= 9','Safari >= 9','Android >= 4.4','Opera >= 30'], {
        cascade: true
    }))
    //.pipe(minifyCSS())
    .pipe(concat('bootstrap.min.css'))
    .pipe(sourcemaps.write('.'))
    .pipe(dest('build/assets/css'));
}

// JS bundled into min.js task
function js() {
    return src('dist/js/*.js')
    .pipe(sourcemaps.init())
    .pipe(concat('scripts.min.js'))
    .pipe(sourcemaps.write('.'))
    .pipe(dest('build/assets/js'));
}

function twigTpl () {
    return src(['./dist/templates/*.twig'])
    // Stay live and reload on error
    .pipe(plumber({
        handleError: function (err) {
            console.log(err);
            this.emit('end');
        }
    }))
    // Load template pages json data
    .pipe(data(function (file) {
            return JSON.parse(fs.readFileSync(paths.data + path.basename(file.path) + '.json'));        
        }).on('error', function (err) {
            process.stderr.write(err.message + '\n');
            this.emit('end');
        })
    )
    // Load default json data
    .pipe(data(function () {
            return JSON.parse(fs.readFileSync(paths.data + path.basename('default.twig.json')));
        }).on('error', function (err) {
            process.stderr.write(err.message + '\n');
            this.emit('end');
        })
    )
    // Twig compiled
    .pipe(twig()
        .on('error', function (err) {
            process.stderr.write(err.message + '\n');
            this.emit('end');
        })
    )    
    .pipe(dest(paths.build));
}


function copyAssets() {
    // Copy assets
    return src(['./dist/assets/**/*.*','!./dist/assets/**/*.psd','!./dist/assets/**/*.*.map'],
        del(paths.build + 'assets/**/*')
    )
    .pipe(gulpcopy(paths.build + 'assets', { prefix: 2 }));
}

// BrowserSync
function browserSync() {
    browsersync({
        server: {
            baseDir: paths.build
        },
        notify: false,
        browser: "google chrome",
        // proxy: "0.0.0.0:5000"
    });
}

// BrowserSync reload 
function browserReload () {
    return browsersync.reload;
}

// Watch files
function watchFiles() {
    // Watch SCSS changes    
    watch(paths.scss + '**/*.scss', parallel(css))
    .on('change', browserReload());
    // Watch javascripts changes    
    watch(paths.js + '*.js', parallel(js))
    .on('change', browserReload());
    // Watch template changes
    watch(['dist/templates/**/*.twig','dist/data/*.twig.json'], parallel(twigTpl))
    .on('change', browserReload());
    // Assets Watch and copy to build in some file changes
    watch('dist/assets/**/*')
    .on('change', series(copyAssets, css, css_vendors, js, browserReload()));
}

const watching = parallel(watchFiles, browserSync);

exports.js = js;
exports.css = css;
exports.default = parallel(copyAssets, css, js, twigTpl);
exports.watch = watching;

My gulp version:

"node": "18.12.1"
"gulp": "^4.0.2",

On terminal when i write gulp -v it shows:

CLI version: 2.3.0 Local version: 4.0.2

Expecting professional help

Answer 1

Since your gulpfile is a CommonJS module, use require instead of import :

const { src, dest, parallel, series, watch } = require('gulp');
const twig = require('gulp-twig');
const sass = require('gulp-sass');
const prefix = require('gulp-autoprefixer');
const data = require('gulp-data');
const sourcemaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');
const plumber = require('gulp-plumber');
const browsersync = require('browser-sync');
const gulpcopy = require('gulp-copy');
const fs = require('fs');
const del = require('del');
const path = require('path');

Using an ESM style gulpfile is also an option, but it's not as simple as just replacing require with import (btw the syntax is import sass from 'gulp-sass'; ...), you will also need to rename the file to "gulpfile.mjs", change the style of your exports , and probably more.