ReferenceError: require is not defined at gulpfile.js

Question

So, I am new to js development. What I am trying to do is to set up a basic environment to study and to be kind of a bootstrap, with gulp tasks and so on.

I'm stuck in this error thrown in the terminal:

ReferenceError: require is not defined
at file:///Users/henriquegodinho/Google%20Drive/Elucid%C3%A1rio.art/plugin/elucidario/gulpfile.js:12:12
at ModuleJob.run (internal/modules/esm/module_job.js:146:23)
at async Loader.import (internal/modules/esm/loader.js:165:24)

I did my homework before coming here to ask and tried to debug and search for an answer by myself, but all the search results for this is for client side implementation, but I'm doing this at the terminal - isn't this the server-side?

node version:

$ node -v
v14.13.0

npm version:

$ npm -v
6.14.8

gulp version:

$ gulp -v
CLI version: 2.3.0
Local version: 4.0.2

the problem is when I run:

$ npm run gulp

gulpfile.json

// Gulp.js configuration
'use strict';
const

    // source and build folders
    dir = {
        src: 'src/',
        build: 'dist/'
    },

    // Gulp and plugins
    gulp = require('gulp'),
    gutil = require('gulp-util'),
    newer = require('gulp-newer'),
    imagemin = require('gulp-imagemin'),
    sass = require('gulp-sass'),
    postcss = require('gulp-postcss'),
    deporder = require('gulp-deporder'),
    concat = require('gulp-concat'),
    stripdebug = require('gulp-strip-debug'),
    uglify = require('gulp-uglify');

// Browser-sync
var browsersync = false;
// PHP settings

const php = {
    src: dir.src + 'php/**/*.php',
    build: dir.build
};
// copy PHP files
gulp.task('php', () => {
    return gulp.src(php.src)
        .pipe(newer(php.build))
        .pipe(gulp.dest(php.build));
});

package.json

{
    "name": "elucidario",
    "version": "0.1.0",
    "description": "",
    "main": "index.js",
    "type": "module",
    "scripts": {
        "wp-env": "wp-env"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.11.6",
        "@babel/preset-env": "^7.11.5",
        "@babel/register": "^7.11.5",
        "@wordpress/env": "^2.0.1",
        "autoprefixer": "^10.0.1",
        "browser-sync": "^2.26.12",
        "css-mqpacker": "^7.0.0",
        "cssnano": "^4.1.10",
        "gulp": "^4.0.2",
        "gulp-clean-css": "^4.3.0",
        "gulp-concat": "^2.6.1",
        "gulp-deporder": "^1.2.0",
        "gulp-if": "^3.0.0",
        "gulp-imagemin": "^7.1.0",
        "gulp-newer": "^1.4.0",
        "gulp-postcss": "^9.0.0",
        "gulp-sass": "^4.1.0",
        "gulp-strip-debug": "^3.0.0",
        "gulp-uglify": "^3.0.2",
        "gulp-util": "^3.0.8",
        "postcss-assets": "^5.0.0",
        "yarg": "^1.0.8"
    },
    "dependencies": {
        "esm": "^3.2.25"
    }
}

What am I doing wrong?

Answer 1

you don't seem to have a gulp run script in your package.json also you want to remove "type": "module" from package.json which is causing the issue with require/esm.

here are my edits to your package.json file

{
"name": "elucidario",
"version": "0.1.0",
"description": "",
"main": "index.js",
"scripts": {
    "wp-env": "wp-env",
    "gulp": "node ./node_modules/gulp/bin/gulp.js php"
},
"author": "",
"license": "ISC",
"devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@babel/register": "^7.11.5",
    "@wordpress/env": "^2.0.1",
    "autoprefixer": "^10.0.1",
    "browser-sync": "^2.26.12",
    "css-mqpacker": "^7.0.0",
    "cssnano": "^4.1.10",
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-deporder": "^1.2.0",
    "gulp-if": "^3.0.0",
    "gulp-imagemin": "^7.1.0",
    "gulp-newer": "^1.4.0",
    "gulp-postcss": "^9.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-strip-debug": "^3.0.0",
    "gulp-uglify": "^3.0.2",
    "gulp-util": "^3.0.8",
    "postcss-assets": "^5.0.0",
    "yarg": "^1.0.8"
},
"dependencies": {
    "esm": "^3.2.25",
    "gulp-babel": "^8.0.0"
}

}

also rename your gulpfile to

gulpfile.babel.js