Error “Require() of ES Module is not supported”

[markhowellsmead]

I'm getting the following error when attempting to compile my styles. The contents of my task-styles.js file is below. Can you see a problem here?

Error [ERR_REQUIRE_ESM]: require() of ES Module […]/node_modules/gulp-filter/index.js from […]/task-styles.js not supported.
Instead change the require of index.js in […]/task-styles.js to a dynamic import() which is available in all CommonJS modules.

Unless I'm blind, there is no use of require here in connection with gulp-filter.

import { src, dest } from 'gulp';
import sourcemaps from 'gulp-sourcemaps';
import rename from 'gulp-rename';
import cleanCSS from 'gulp-clean-css';
import filter from 'gulp-filter';
import editorStyles from 'gulp-editor-styles';
const sass = require('gulp-sass')(require('sass'));

export const task = (config) => {
	const filterAdminEditor = filter(`${config.assetsBuild}styles/admin-editor.css`, { restore: true });

	return (
		src(config.assetsBuild + 'styles/**/*.scss')
			.pipe(filterAdminEditor.restore)
			.pipe(sourcemaps.init())
			.pipe(
				sass({
					includePaths: ['./node_modules/'], // Include node_modules folder
				}).on('error', sass.logError)
			)
			.pipe(sourcemaps.write('.'))
			.pipe(dest(config.assetsDir + 'styles/'))
			.pipe(filterAdminEditor)
			.pipe(editorStyles())
			.pipe(filterAdminEditor.restore)
			.pipe(dest(config.assetsDir + 'styles/'))
			.pipe(cleanCSS())
			.pipe(rename({ suffix: '.min' }))
			.pipe(dest(config.assetsDir + 'styles/'))
	);
};

[sindresorhus]

You are probably transpiring the gulp file.

https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c