CODEWITHSUNDEEP
javascriptnode.jsgulp
DarkLite1
DarkLite1

Reputation: 14705

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

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

Upvotes: 5

Views: 20426

Answers (2)

GOTO 0
GOTO 0

Reputation: 47662

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.

Upvotes: 4

DarkLite1
DarkLite1

Reputation: 14705

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.

Upvotes: 5

Related Questions