After upgrading Gulp, javascript is throwing an syntax-error “import declarations may only appear at top level of a module”

[magic-john]

I have a gulpfile.js that watch file changes in a folder. Everything was working fine until I upgraded from Gulp 3.9.1 to 4.0.2.

Here is my gulp task that bundles the js files

var gulp = require("gulp"),
    concat = require("gulp-concat"),
    filter = require('gulp-filter'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify-es').default,
    merge = require("merge-stream");

gulp.task("min:js", function () {
    var tasks = [];

    var task = gulp.src(['path_1/**/*.js', 'path_2/**/*.js'], { base: "." })
            .pipe(filter('**/*.js'))
            .pipe(concat('output.js'))
            .pipe(gulp.dest("."))
            .pipe(uglify())
            .pipe(rename({ suffix: '.min' }))
            .pipe(gulp.dest("."));

    tasks.push(task);

    return merge(tasks);
});

The task generates the following code

// More Js code...
import { setTimeout } from "timers";

'use strict';
// more js code.....

But the line import { setTimeout } from "timers"; is throwing the following error

SyntaxError: import declarations may only appear at the level of a
module

I tried changing <script src="my-module.js"></script> to <script type="module" src="my-module.js"></script>

Now I get the following error

TypeError:` Error resolving module specifier: timers

Please provide the following information:

• OS & version [e.g. MacOS Catalina 10.15.4]:
• node version (run node -v): v12.17.0
• npm version (run npm -v): 6.13.1
• gulp version (run gulp -v): 4.0.2 (CLI version 2.2.1)

[phated]

@magic-john that looks like your issue is coming from a plugin. Did you upgrade your plugins at the same time?

I also moved this to Discussions since plugins are a support question.

[magic-john]

Thank you. Yes I did upgrade everything along with gulp. Which plugin would it be or how can I find out the cause?

[phated]

@magic-john you are usually going to want to look at any stack trace you might have. That might not be available though, so you could revert the plugin upgrades until you find the one that caused the issue.

[phated]

Your sample is pretty small though, and you only have 1 plugin that operates on JavaScript "syntax" (because you had a SyntaxError), which would be gulp-uglify-es—so that is likely your culprit.

[magic-john]

I don't believe the issue is coming from the gulp-uglify-es. To be sure I eliminated it. So my task looks like this now

gulp.task("min:js", function () {
    var tasks = [];

    var task = gulp.src(['path_1/**/*.js', 'path_2/**/*.js'], { base: "." })
            .pipe(filter('**/*.js'))
            .pipe(concat('output.js'))
            .pipe(gulp.dest("."));

    tasks.push(task);

    return merge(tasks);
});

I did not upgrade any of the following gulp-filter, gulp-concat, or merge-stream . The only thing that was upgraded was gulp along with Node.

[magic-john]

@phated any other ideas? My code is failing even when I am only using filter, concat and merge plugins

gulp.task("min:js", function () {
    var task = gulp.src(['path_1/**/*.js', 'path_2/**/*.js'], { base: "." })
            .pipe(filter('**/*.js'))
            .pipe(concat('output.js'))
            .pipe(gulp.dest("."));

    return merge(task);
});