KPC
Kevin Powell - Community•10mo ago
EmSixTeen

My gulp has broken and I'm seemingly too useless to fix it 😩

I use gulp to collate my scss, js, and move some other stuff. It's not set up great but even just what it was doing took me forever to sort out. Yesterday it suddenly stopped working, and I'd no idea why. Naively updated packages, and still not working. I've tried both refactoring and re-writing, but my JS level is whack and I'm failing hard, while this is blocking everything else I'm doing for the moment 😩 I understand that it's largely about updating to imports instead of require, but the practical side of that I'm lost on. Is there any chance anyone else can help me either refactor/fix this, or write a new gulpfile which can do what I'm looking to do? I'd really appreciate it 🙏 I'm not tied to gulp specifically, I just need something which: - compiles scss for front-end in both minified and non-minified version - compiles scss for wp admin in both minified and non-minified version - collates js that I want to bundle together from a specific folder in both minified and non-minified version - moves other individual js scripts that I want to keep separate from another specific folder in both minified and non-minified version - copies font files - copies images (hope this is the right channel)
No description
4 Replies
EmSixTeen
EmSixTeenOP•10mo ago
Think these are of use

gulpfile.js

package.json

dys 🐙
dys 🐙•10mo ago
Your error is REQUIRE_ESM. "ESM" or ECMAScript Modules is a syntax for importing (and exporting) dependencies. If you have any statements like "const library = require('library')", that's CommonJS, the precursor to ESM. You should change them to look like "import library from 'library'". Being able to see the actual code would make it easier to be more specific.
EmSixTeen
EmSixTeenOP•10mo ago
The entire gulpfile is attached here already In the second message
dys 🐙
dys 🐙•10mo ago
Sorry, didn't realize. So, to make my comment more specific, try switching your require statements to: 
import gulp from 'gulp'
import sassBase from 'sass'
import gulpSASS from 'gulp-sass'
import autoprefixer from 'gulp-autoprefixer'
import cleanCSS from 'gulp-clean-css'
import concat from 'gulp-concat'
import terser from 'gulp-terser'
import watch from 'gulp-watch'

const sass = gulpSASS(sassBase)
import gulp from 'gulp'
import sassBase from 'sass'
import gulpSASS from 'gulp-sass'
import autoprefixer from 'gulp-autoprefixer'
import cleanCSS from 'gulp-clean-css'
import concat from 'gulp-concat'
import terser from 'gulp-terser'
import watch from 'gulp-watch'

const sass = gulpSASS(sassBase)

Did you find this page helpful?