SPFx "Task never defined: serve" after upgrade to gulp 4

Question

My environment is now giving me errors after upgrading ...

C:\work\SPO\webparts\solution>npm ls -g --depth=0
C:\Program Files\nodejs
+-- @microsoft/[email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

node -v is v14.18.0

When I do gulp serve I get ....

Build target: DEBUG
[16:01:07] Using gulpfile C:\work\SPO\webparts\solution\gulpfile.js
[16:01:07] Task never defined: serve
[16:01:07] To list available tasks, try running: gulp --tasks
About to exit with code: 1
Process terminated before summary could be written, possible error in async code not continuing!
Trying to exit with exit code 1

My gulpfile.js is ...

'use strict';
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
build.configureWebpack.mergeConfig({
additionalConfiguration: (generatedConfiguration) => {
generatedConfiguration.module.rules.push(
{
test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: {
loader: 'url-loader'
}
}
);
return generatedConfiguration;
}
});
build.initialize(gulp);

Thanks P

Answer 1

I had the same issue with the same version of node and gulp, although my issue came when cloning another project. I am not sure how it works for them (the commented out section), but I got it to work by adding the reference to 'serve' (or the code after the commented out section)

'use strict';

//const gulp = require('gulp');
//const build = require('@microsoft/sp-build-web');
//build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

//build.initialize(gulp);

const build = require('@microsoft/sp-build-web');

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
  var result = getTasks.call(build.rig);

  result.set('serve', result.get('serve-deprecated'));

  return result;
};

build.initialize(require('gulp'));