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

Question

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. When upgrading the Gulp, I also upgraded my node.js to the latest v12.17.0

Here is my gulp task that bundles the js files

var gulp = require("gulp"),
    concat = require("gulp-concat"),
    filter = require('gulp-filter'),
    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("."));

    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

How can I fix this error?

Gopinath · Accepted Answer · 2020-05-31 16:24:09Z

1

The above problem might be caused due to the attempt to import setTimeout as a module.

setTimeout is a standard javascript function and it need not be imported explicitly. Therefore, removing the import statement may solve the issue.

If the above step does not fix the issue, then the following may be tried:

Add type="module" attribute to the HTML script tag that includes the module.

<script type="module" src="my-module.js"></script>

answered May 31, 2020 at 16:24

Gopinath

4,9951 gold badge17 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Gopinath Over a year ago

If gulp is generating the unnecessary import, then it could be a defect in that version of gulp. Can you please confirm if reverting to the older version of gulp fixes the issue?

John Over a year ago

I think gulp is what is generating the import { setTimeout } from "timers"; code. I don't have that in my code. While adding type="module" did not work.

John Over a year ago

I tired Gulp 4.0.0 and 4.0.1 both gave me the same error TypeError: Error resolving module specifier: timers

Gopinath Over a year ago

Thanks, John. The error can be considered as a defect in Gulp version 4.

John Over a year ago

I submitted a bug for gulp, but they said it has nothing to do with gulp. Not sure how to solve this problem

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related