Gulp throws error 'Must use import to load ES Module'

Question

We're converting our gulpfile.js in node v13.8.0 to ES6 as following:

import { src, dest, series, parallel, watch } from 'gulp'
import nodemon from 'gulp-nodemon' // normal nodemon does not display an error on app crash
import env from 'gulp-env'
import browser from 'browser-sync'
import sass from 'gulp-sass'
// Tasks
export default {
    cssTranspile: cssTranspile,
    jsTranspile: jsTranspile,
    server: series(startNodemon, startBrowserSync),
    default: series(
        parallel(
            cssTranspile,
            jsTranspile
        ),
        startNodemon,
        startBrowserSync,
        function () {
            watch('public/scss/*.scss', cssTranspile)
        }
    )
}

The error reported, when simply running gulp, is:

internal/modules/cjs/loader.js:1160
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: T:\Node\ICP\gulpfile.js
require() of ES modules is not supported.

I must be doing something wrong. Anyone an idea on what it might be?

CLI version: 2.2.0
Local version: 4.0.2

The flag "type": "module", is set in package.json as described in the note docs. The issue is very much similar to this issue in the geolib library.

And when we rename gulpfile.js to gulpfile.babel.js as described here we get the same error.

The package.json contain these packages:

  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "@babel/register": "^7.8.3",
    "exports-loader": "^0.7.0",
    "gulp": "^4.0.2",
    "gulp-env": "^0.4.0",
    "gulp-nodemon": "^2.4.2",
    "gulp-sass": "^4.0.2",
    "nodemon": "^2.0.2"
  },
  "type": "module",
  "babel": {
    "presets": [
      "@babel/env"
    ]

Answer 1

In an answer to my own question, when the flag "type": "module" is set in package.json you can't use gulp. More info can be found here.

Answer 2

This seems to be fixed now: https://github.com/gulpjs/gulp-cli/pull/214. Be sure to install the latest version of gulp-cli (2.3.0 as of June 2020).

If your package.json specifies "type": "module" you can name your ES module with Gulp tasks gulpfile.js, otherwise name it gulpfile.mjs. No need to use any transpilers or preloaders like esm, Babel or TypeScript.