How to solve ERR_REQUIRE_ESM while running gulp

I have just encountered this error. I would like to share how to solve ERR_REQUIRE_ESM error while using Gulp.

Most of the modules are now moved to ESM (import) from CommonJS (require) but gulpfile still support require (CommonJS). I got this error while trying to import gulp-autoprefixer using ‘require’. So I googled and found this following solution to convert CommonJS (require) to ESM (import) on github.

Here’s the step-by-step that solved my issue.

1. Rename gulpfile.js to gulpfile.mjs
2. Change const autoprefixer=require('gulp-autoprefixer'); to import autoprefixer from 'gulp-autoprefixer';

Basically follow this pattern and change every require to import. So I followed that and change everything to import. My imports of my gulpfile looks like this now:

import gulp from 'gulp';
const { series, parallel, src, dest, task } = gulp;
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);
import autoprefixer from 'gulp-autoprefixer';
import babel from 'gulp-babel';
import uglify from 'gulp-uglify';
import rename from 'gulp-rename';

Now my gulpfile name is gulpfile.mjs

Here is the original gist: https://gist.github.com/noraj/007a943dc781dc8dd3198a29205bae04

Please leave your comments. Thank you very much.