<anonymous> error while creating a custom widget

2
Hello Everyone, I’m a beginner in mendix field and I’m tring to build a custom widget following the instructions given in the learning path. https://gettingstarted.mendixcloud.com/link/module/134/lecture/1269   But according to the path, while running the command gulp  it should run properly but I’m getting an error : PS C:\Users\Gayatree\test-widget\enter-to-action> gulp [13:11:28] Using gulpfile ~\test-widget\enter-to-action\gulpfile.js [13:11:28] Starting 'default'... [13:11:28] Starting 'build'... [13:11:28] Starting 'compress'... [13:11:28] Starting 'clean'...    [13:11:28] Finished 'clean' after 20 ms [13:11:28] Starting '<anonymous>'...    [13:11:28] Finished '<anonymous>' after 127 ms [13:11:28] Finished 'compress' after 178 ms [13:11:28] Finished 'build' after 181 ms [13:11:28] Starting '<anonymous>'... [13:11:28] '<anonymous>' errored after 1.77 ms [13:11:28] Error: watching ./src/**/*: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)     at Gulp.watch (C:\Users\Gayatree\test-widget\enter-to-action\node_modules\gulp\index.js:31:11)     at C:\Users\Gayatree\test-widget\enter-to-action\gulpfile.js:47:14          at bound (domain.js:419:14)     at runBound (domain.js:432:12)     at asyncRunner (C:\Users\Gayatree\test-widget\enter-to-action\node_modules\async-done\index.js:55:18)     at processTicksAndRejections (internal/process/task_queues.js:76:11)    [13:11:28] 'default' errored after 220 ms   I have attached the index.js  'use strict'; var util = require('util'); var Undertaker = require('undertaker'); var vfs = require('vinyl-fs'); var watch = require('glob-watcher'); function Gulp() { Undertaker.call(this); // Bind the functions for destructuring this.watch = this.watch.bind(this); this.task = this.task.bind(this); this.series = this.series.bind(this); this.parallel = this.parallel.bind(this); this.registry = this.registry.bind(this); this.tree = this.tree.bind(this); this.lastRun = this.lastRun.bind(this); this.src = this.src.bind(this); this.dest = this.dest.bind(this); this.symlink = this.symlink.bind(this); } util.inherits(Gulp, Undertaker); Gulp.prototype.src = vfs.src; Gulp.prototype.dest = vfs.dest; Gulp.prototype.symlink = vfs.symlink; Gulp.prototype.watch = function(glob, opt, task) { if (typeof opt === 'string' || typeof task === 'string' || Array.isArray(opt) || Array.isArray(task)) { throw new Error('watching ' + glob + ': watch task has to be ' + 'a function (optionally generated by using gulp.parallel ' + 'or gulp.series)'); } if (typeof opt === 'function') { task = opt; opt = {}; } opt = opt || {}; var fn; if (typeof task === 'function') { fn = this.parallel(task); } return watch(glob, opt, fn); }; // Let people use this class from our instance Gulp.prototype.Gulp = Gulp; var inst = new Gulp(); module.exports = inst;   I have also attached the gulpfile.js file  // Generated on 2020-02-13 using generator-mendix 2.2.5 :: git+https://github.com/mendix/generator-mendix.git /*jshint -W069,-W097*/ "use strict"; // In case you seem to have trouble starting Mendix through `gulp modeler`, you might have to set the path to the Mendix application, otherwise leave both values as they are var MODELER_PATH = null; var MODELER_ARGS = "/file:{path}"; /******************************************************************************** * Do not edit anything below, unless you know what you are doing ********************************************************************************/ var gulp = require("gulp"), zip = require("gulp-zip"), del = require("del"), newer = require("gulp-newer"), log = require('fancy-log'), colors = require('ansi-colors'), plumber = require("gulp-plumber"), gulpif = require("gulp-if"), jsonTransform = require("gulp-json-transform"), intercept = require("gulp-intercept"), argv = require("yargs").argv, widgetBuilderHelper = require("widgetbuilder-gulp-helper"), jsValidate = require("gulp-jsvalidate"); var pkg = require("./package.json"), paths = widgetBuilderHelper.generatePaths(pkg), xmlversion = widgetBuilderHelper.xmlversion; gulp.task("clean", function () { return del([ paths.WIDGET_TEST_DEST, paths.WIDGET_DIST_DEST ], { force: true }); }); gulp.task("compress", gulp.series("clean", function () { return gulp.src("src/**/*") .pipe(zip(pkg.name + ".mpk")) .pipe(gulp.dest(paths.TEST_WIDGETS_FOLDER)) .pipe(gulp.dest("dist")); })); gulp.task("build", gulp.series("compress")); gulp.task("default", gulp.series('build', function() { gulp.watch("./src/**/*", ("compress")); gulp.watch("./src/**/*.js", ("copy:js")); gulp.watch("./src/**/*.html", ("copy:html")); })); gulp.task("compress", gulp.series("clean", function () { return gulp.src("src/**/*") .pipe(zip(pkg.name + ".mpk")) .pipe(gulp.dest(paths.TEST_WIDGETS_FOLDER)) .pipe(gulp.dest("dist")); })); gulp.task("copy:js", function () { return gulp.src(["./src/**/*.js"]) .pipe(plumber(function (error) { var msg = colors.red("Error"); if (error.fileName) { msg += colors.red(" in ") + colors.cyan(error.fileName); } msg += " : " + colors.cyan(error.message); log(msg); this.emit("end"); })) .pipe(jsValidate()) .pipe(newer(paths.TEST_WIDGETS_DEPLOYMENT_FOLDER)) .pipe(gulp.dest(paths.TEST_WIDGETS_DEPLOYMENT_FOLDER)); }); gulp.task("copy:html", function () { return gulp.src(["./src/**/*.html"]) .pipe(newer(paths.TEST_WIDGETS_DEPLOYMENT_FOLDER)) .pipe(gulp.dest(paths.TEST_WIDGETS_DEPLOYMENT_FOLDER)); }); gulp.task("version:xml", function () { return gulp.src(paths.PACKAGE_XML) .pipe(xmlversion(argv.n)) .pipe(gulp.dest("./src/")); }); gulp.task("version:json", function () { return gulp.src("./package.json") .pipe(gulpif(typeof argv.n !== "undefined", jsonTransform(function(data) { data.version = argv.n; return data; }, 2))) .pipe(gulp.dest("./")); }); gulp.task("icon", function (cb) { var icon = (typeof argv.file !== "undefined") ? argv.file : "./icon.png"; console.log("\nUsing this file to create a base64 string: " + colors.cyan(icon)); gulp.src(icon) .pipe(intercept(function (file) { console.log("\nCopy the following to your " + pkg.name + ".xml (after description):\n\n" + colors.cyan("<icon>") + file.contents.toString("base64") + colors.cyan("<\/icon>") + "\n"); cb(); })); }); gulp.task("folders", function () { paths.showPaths(); return; }); gulp.task("modeler", function (cb) { widgetBuilderHelper.runmodeler(MODELER_PATH, MODELER_ARGS, paths.TEST_PATH, cb); }); gulp.task("version", gulp.parallel("version:xml", "version:json"));   Please can anyone help me?
asked
2 answers
0

When creating a custom widget, the best thing to do is creating a Pluggable widget.

If you get the latest Yeoman plugin: https://github.com/mendix/pluggable-widgets-generator you boot up the process differently.

Pluggable widgets are new since Mendix 8+ projects. I would recommend learning it this way.

answered
0

Here I have a Mendix how-to: https://docs.mendix.com/howto/extensibility/create-a-pluggable-widget-one

And I have even written an article about it: https://medium.com/mendix/how-to-react-to-the-new-way-mendix-widgets-are-be-build-675e43599925

answered