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"
    ]

Have you tried renaming `gulpfile.js` to `gulpfile.mjs`, then using the `--gulpfile gulpfile.mjs` flag on the command line? Maybe that will force `loader.js` to use import. — terrymorse, Feb 13 '20 at 14:38
I just tried your suggestion `gulp --gulpfile gulpfile.mjs` but it returns the same error `Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: T:\ICP\gulpfile.mjs` — DarkLite1, Feb 13 '20 at 14:46
Hmm. Maybe there's a bug in Node's loader.js. that's forcing it to use `require`. They do warn that import/export are experimental. Here's where that error is coming from: `if (filename.endsWith('.mjs') && !Module._extensions['.mjs']) { throw new ERR_REQUIRE_ESM(filename); }` — terrymorse, Feb 13 '20 at 16:40
If the "modules" you are importing don't use es6 import/exports you will have to do extra work to get them to work, see https://stackoverflow.com/questions/45854169/how-can-i-use-an-es6-import-in-node last answer. — Mark, Feb 14 '20 at 03:18
Thank you @Mark, I opened an issue with [gulp](https://github.com/gulpjs/gulp/issues/2417) to see what can be done. — DarkLite1, Feb 14 '20 at 08:28

score 4 · Answer 1 · answered Feb 14 '20 at 10:52

4

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.

answered Feb 14 '20 at 10:52

DarkLite1

9,743
30
88
160

score 1 · Answer 2 · answered Jun 21 '20 at 14:16

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.

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

2 Answers2