search

stefanobartoletti / bricks

A modular WordPress starter theme powered by Bootstrap 5 and Gulp
https://bricks.stefanobartoletti.it
GNU General Public License v3.0
69 stars 18 forks source link

Converting Gulpfile to ESM generates errors after updating gulp-imagemin #92

Closed stefanobartoletti closed 3 years ago

stefanobartoletti commented 3 years ago

Describe the bug

I'm in the process of updating gulpfile.js from CommonJS to ESM, to support some updated plugins that come only in this format (mainly gulp-imagemin). The main change is related to the new import syntax instead of require: so, in example, const autoprefixer = require('gulp-autoprefixer'); is now import autoprefixer from 'gulp-autoprefixer';.

The Gulpfile was renamed to gulpfile.esm.js and I have installed the esm NPM package, following the instructions on the Gulp docs.

The updated gulpfile is available here = https://github.com/stefanobartoletti/bricks/blob/gulp-esm/gulpfile.esm.js

After this conversion everything works well, all the tasks do what they are supposed to do, until I try to update gulp-imagemin from v7.1.0 to v8.0.0.

After trying to update it, the follwing errors appear after trying to run the scripts:

% yarn
yarn install v1.22.11
[1/4] 🔍  Resolving packages...
success Already up-to-date.
$ gulp default
[15:17:01] Requiring external module esm
TypeError [ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING]: A dynamic import callback was not specified.
    at exports.importModuleDynamicallyCallback (internal/process/esm_loader.js:34:9)
    at eval (eval at <anonymous> (/Users/stefanobartoletti/Sviluppo/Personali/bricklayer/bricks/node_modules/gulp-cli/lib/shared/require-or-import.js:10:15), <anonymous>:3:1)
    at requireOrImport (/Users/stefanobartoletti/Sviluppo/Personali/bricklayer/bricks/node_modules/gulp-cli/lib/shared/require-or-import.js:24:7)
    at execute (/Users/stefanobartoletti/Sviluppo/Personali/bricklayer/bricks/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js:37:3)
    at Liftoff.handleArguments (/Users/stefanobartoletti/Sviluppo/Personali/bricklayer/bricks/node_modules/gulp-cli/index.js:211:24)
    at Liftoff.execute (/Users/stefanobartoletti/Sviluppo/Personali/bricklayer/bricks/node_modules/liftoff/index.js:201:12)
    at module.exports (/Users/stefanobartoletti/Sviluppo/Personali/bricklayer/bricks/node_modules/flagged-respawn/index.js:51:3)
    at Liftoff.<anonymous> (/Users/stefanobartoletti/Sviluppo/Personali/bricklayer/bricks/node_modules/liftoff/index.js:191:5)
    at /Users/stefanobartoletti/Sviluppo/Personali/bricklayer/bricks/node_modules/liftoff/index.js:149:9
    at /Users/stefanobartoletti/Sviluppo/Personali/bricklayer/bricks/node_modules/v8flags/index.js:162:14 {
  code: 'ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

and

% yarn build
yarn run v1.22.11
$ gulp build
[15:20:53] Requiring external module esm
TypeError: Invalid host defined options
    at eval (eval at <anonymous> (/Users/stefanobartoletti/Sviluppo/Personali/bricklayer/bricks/node_modules/gulp-cli/lib/shared/require-or-import.js:10:15), <anonymous>:3:1)
    at requireOrImport (/Users/stefanobartoletti/Sviluppo/Personali/bricklayer/bricks/node_modules/gulp-cli/lib/shared/require-or-import.js:24:7)
    at execute (/Users/stefanobartoletti/Sviluppo/Personali/bricklayer/bricks/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js:37:3)
    at Liftoff.handleArguments (/Users/stefanobartoletti/Sviluppo/Personali/bricklayer/bricks/node_modules/gulp-cli/index.js:211:24)
    at Liftoff.execute (/Users/stefanobartoletti/Sviluppo/Personali/bricklayer/bricks/node_modules/liftoff/index.js:201:12)
    at module.exports (/Users/stefanobartoletti/Sviluppo/Personali/bricklayer/bricks/node_modules/flagged-respawn/index.js:51:3)
    at Liftoff.<anonymous> (/Users/stefanobartoletti/Sviluppo/Personali/bricklayer/bricks/node_modules/liftoff/index.js:191:5)
    at /Users/stefanobartoletti/Sviluppo/Personali/bricklayer/bricks/node_modules/liftoff/index.js:149:9
    at /Users/stefanobartoletti/Sviluppo/Personali/bricklayer/bricks/node_modules/v8flags/index.js:162:14
    at /Users/stefanobartoletti/Sviluppo/Personali/bricklayer/bricks/node_modules/v8flags/index.js:41:14
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Steps To Reproduce

  1. Clone this repository: git clone https://github.com/stefanobartoletti/bricks.git
  2. Switch to gulp-esm branch, where the update of the Gulp configuration is developed: git checkout gulp-esm
  3. Install dependencies: yarn
  4. Test tasks to confirm that everything goes fine: yarn dev, yarn build, yarn watch (no errors are expected until now).
  5. Upgrade gulp-imagemin to v8.0.0: yarn upgrade --latest gulp-imagemin
  6. Run yarn dev, the previous errors appear, preventing the task to complete successfully.

Summary

After converting gulpfile to ESM, updating gulp-imagemin to v8.0.0 generates some errors about

Some help is welcome with this issue, as I am unable to figure out myself how to solve it.

stefanobartoletti commented 3 years ago

I was able to solve this by reverting gulpfile.esm.js to gulpfile.js, and declaring "type": "module" inside package.json.

Jobayer-ak commented 3 years ago

same problem i am facing but couldn't find any solution...don't know how i can fix it.

stefanobartoletti commented 3 years ago

Hi, If you need help please open a new issue with a detailed description, so we can sort it out

billyromano commented 2 years ago

I was able to solve this by reverting gulpfile.esm.js to gulpfile.js, and declaring "type": "module" inside package.json.

When I do this simple change, I get the following errors showing up instead:

% npm run test
> gulp test

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/XXXXXX/_work/_git/PROJECT/gulpfile.js' is not supported resolving ES modules imported from /Users/XXXXXX/_work/_git/PROJECT/node_modules/gulp-cli/lib/shared/require-or-import.js
Did you mean to import /Users/XXXXXX/_work/_git/PROJECT/gulpfile.js/index.js?
    at new NodeError (internal/errors.js:322:7)
    at finalizeResolution (internal/modules/esm/resolve.js:314:17)
    at moduleResolve (internal/modules/esm/resolve.js:776:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:887:11)
    at Loader.resolve (internal/modules/esm/loader.js:89:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
    at Loader.import (internal/modules/esm/loader.js:177:28)
    at importModuleDynamically (internal/modules/cjs/loader.js:1028:27)
    at exports.importModuleDynamicallyCallback (internal/process/esm_loader.js:30:14)
    at eval (eval at <anonymous> (/Users/XXXXXX/_work/_git/PROJECT/node_modules/gulp-cli/lib/shared/require-or-import.js:10:15), <anonymous>:3:1) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///Users/XXXXXX/_work/_git/PROJECT/_git/chase_abe_education/gulpfile.js'
}

Any ideas what might be causing this error?

EDIT: the error is caused because of the code splitting setup, so peeps using code splitting should not use this approach.

I'm also using the code splitting technique for the gulpfile.esm.js file: gulpfile.esm.js/index.js

Here's my sample index.js file to test (inside the gulpfile.js folder–following your example to rename it):

import gulp      from "gulp";
import rimraf    from "rimraf";

export const test = gulp
    .series((done) => {
        rimraf("./dist", done);
    })(done);
billyromano commented 2 years ago

I got my setup working finally. It must have been a cache issue? 🤷🏻

Here's my Gulp file ESM setup with code splitting:

🗄 File Structure

project/
  gulpfile.esm.js/
    index.js
  package.json

📂 package.json

{
  "name": "gulp-esm",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "author": "Billy Romano",
  "license": "MIT",
  "scripts": {
    "start": "gulp",
    "test": "gulp test"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.5",
    "bootstrap": "^5.0.1",
    "bootstrap-tagsinput": "^0.7.1",
    "bootstrap5-tags": "^1.4.34",
    "jquery": "^3.6.0",
    "jquery-ui": "^1.13.0",
    "jquery.easing": "^1.4.1",
  },
  "devDependencies": {
    "@babel/core": "^7.17.10",
    "@babel/plugin-proposal-throw-expressions": "^7.14.5",
    "@babel/preset-env": "^7.17.10",
    "@babel/register": "^7.17.7",
    "babel-loader": "^8.2.5",
    "core-js": "^3.22.4",
    "esm": "^3.2.25",
    "expose-loader": "^3.1.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-buffer": "^0.0.2",
    "gulp-cli": "^2.0.1",
    "gulp-htmlmin": "^5.0.1",
    "gulp-imagemin": "^8.0.0",
    "gulp-load-plugins": "^2.0.7",
    "gulp-postcss": "^9.0.0",
    "gulp-sass": "^5.1.0",
    "gulp-sourcemaps": "^3.0.0",
    "rimraf": "^3.0.2",
    "sass": "^1.51.0",
    "through2": "^4.0.2",
    "vinyl-named": "^1.1.0",
    "webpack": "^5.72.0",
    "webpack-stream": "^7.0.0",
    "yargs": "^17.4.1"
  }
}

📂 gulpfile.esm.js/index.js

import gulp      from "gulp";
import rimraf    from "rimraf";

export const test = gulp
    .series((done) => {
        rimraf("./dist", done);
    });

✅ Sample console output

% npm run test

> gulp-esm@1.0.0 test
> gulp test

[10:04:54] Requiring external module esm
[10:04:55] Using gulpfile ~/_work/_git/PROJECT/gulpfile.esm.js
[10:04:55] Starting 'test'...
[10:04:55] Starting '<anonymous>'...
[10:04:55] Finished '<anonymous>' after 177 ms
[10:04:55] Finished 'test' after 179 ms

Helpful references I've found from lots of research on the google.

Hope this helps all the Gulp ESM peeps with the setup! 😎🍻