Why is gulp-imagemin not working?

Question

gulp.js

I'm trying to install gulp-imagemin, but when I run the gulp-imagemin command in the terminal, I get the following error:
ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js ' file extension and 'C:\Users\tempe\Desktop\gulp-start\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the
'.cjs' file extension . I still do not understand which file should be renamed with the cjs extension. Help me figure out how to import images from one folder, compress the image and move them to another folder. I tried through import, as it is written in the documentation, but it did not work out.

For completeness, here is the archive with the fileshttps://drive.google.com/file/d/1WOsc51FwDwQTsfMs1...

This is what I have written in gulpfile.js

const { src, dest, watch, parallel } = require('gulp');
const scss = require('gulp-sass')(require('sass'));
const concat = require('gulp-concat');
const browserSync = require('browser-sync').create();
const uglify = require('gulp-uglify-es').default;
const autoprefixer = require('gulp-autoprefixer');
const imagemin = require('gulp-imagemin');



function browsersync() {
    browserSync.init({
        server: {
            baseDir: "app/"
        }
    });
}


function images() {
    return src('app/images/**/*')
        .pipe(imagemin(
            [
                imagemin.gifsicle({ interlaced: true }),
                imagemin.mozjpeg({ quality: 75, progressive: true }),
                imagemin.optipng({ optimizationLevel: 5 }),
                imagemin.svgo({
                    plugins: [
                        { removeViewBox: true },
                        { cleanupIDs: false }
                    ]
                })
            ]
        ))
        .pipe(dest('dist/images'))
}

function scripts() {
    return src([
        'node_modules/jquery/dist/jquery.js',
        'app/js/main.js'
    ])
        .pipe(concat('main.min.js'))
        .pipe(uglify())
        .pipe(dest('app/js'))
        .pipe(browserSync.stream());

}


function styles() {
    return src('app/scss/style.scss')
        .pipe(scss({ outputStyle: 'expanded' }))
        .pipe(concat('style.min.css'))
        .pipe(autoprefixer({
            overrideBrowserslist: ['last 10 version'],
            grid: true
        }))
        .pipe(dest('app/css'))
        .pipe(browserSync.stream());
}

function build() {
    return src([
        'app/css/style.min.css',
        'app/fonts/**/*',
        'app/js/main.min.js ',
        'app/*.html'
    ], { base: 'app' })
        .pipe(dest('dist'))
}

function watching() {
    watch(['app/scss/**/*.scss'], styles);
    watch(['app/js/**/*.js', '!app/js/main.min.js'], scripts);
    watch(["app/*.html"]).on('change', browserSync.reload);

}

exports.styles = styles;
exports.watching = watching;
exports.browsersync = browsersync;
exports.scripts = scripts;
exports.build = build;
exports.images = images;




exports.default = parallel(scripts, watching, browsersync);

package.json

{
  "name": "gulp-start",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Igor Ilin",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.15.4",
    "@babel/core": "^7.15.5",
    "@babel/node": "^7.15.4",
    "@babel/preset-env": "^7.15.6",
    "browser-sync": "^2.27.5",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^8.0.0",
    "gulp-sass": "^5.0.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-uglify-es": "^3.0.0",
    "gulp-watch": "^5.0.1",
    "jquery": "^3.6.0",
    "sass": "^1.39.2"
  },
  "dependencies": {
    "autoprefixer": "^10.3.4",
    "express": "^4.16.4",
    "gulp-uglify": "^3.0.2",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-mozjpeg": "^9.0.0",
    "module": "^1.2.5"
  }
}

Answer 1

The new version of imagemin doesn't work via requare() for some reason, so you need to rewrite the code using import and export.
import gulp from 'gulp'
import imagemin from 'gulp-imagemin'
import concat from 'gulp-concat'
import sync from 'browser-sync'
const browserSync = sync.create();
import uglify from 'gulp-uglify-es'
and so on.
Further, you leave all the functions as they are, only add gulp before the internal methods src, dest, watch, parallel, serises, that is, where you write src gulp.src, etc.
To export a function to run from the terminal, instead of exports.styles = styles write export const stylesRun = styles. The styles function is now available for execution through the terminal with the gulp stylesRun command. Etc
And most importantly, for all this to work, the "type": "module" property must be written in the package.json file, as in the posted TS file:
{
"name": "gulp-start",
"version": "1.0 .0",
"description": "",
"main": "index.js",
"type": "module", <-----here
"scripts": {
"test": "echo \" Error: no test specified\" && exit 1 "
}