Bug in process to building a widget.

3
Your process for building a widget has a bug somewhere.  I first set up the environment (following your video here: https://gettingstarted.mendixcloud.com/link/module/163/lecture/1542), then created the project (following this: https://gettingstarted.mendixcloud.com/link/module/134/lecture/1269).  I then open it in VS Code, and typed “gulp”.  The watch task failed to create with this error: Error: watching ./src/**/*: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)     at Gulp.watch (D:\Data\Mendix\Widgets\reCaptcha\node_modules\gulp\index.js:31:11)     at D:\Data\Mendix\Widgets\reCaptcha\gulpfile.js:47:14     at bound (domain.js:395:14)     at runBound (domain.js:408:12)     at asyncRunner (D:\Data\Mendix\Widgets\reCaptcha\node_modules\async-done\index.js:55:18)     at process._tickCallback (internal/process/next_tick.js:61:11) I’m looking into how to fix this, but if someone already knows, please let me know.  Perhaps something broke in a newer version, but I’m surprised by now I’m the only one reporting it.  
asked
2 answers
1

Hi James,

If you are using mx 8, then you should check out building a pluggable widget. The yeoman generator is using the dojo framework and the pluggable widget is using React. 

https://docs.mendix.com/howto/extensibility/pluggable-widgets

 

The documentation for the pluggable widget api shows the differences between pluggable widgets and custom widgets.

answered
3

The newer version of gulp no longer supports passing task names.  Now a function is REQUIRED. 

https://stackoverflow.com/questions/39665773/gulp-error-watch-task-has-to-be-a-function

Mendix should fix their own file and keep this up to date, since I imagine it is used a lot by widget developers.  In the meantime, change lines 47-49:

        gulp.watch("./src/**/*", ["compress"]);
        gulp.watch("./src/**/*.js", ["copy:js"]);
        gulp.watch("./src/**/*.html", ["copy:html"])

To this:

        gulp.watch("./src/**/*", gulp.series(["compress"]));
        gulp.watch("./src/**/*.js", gulp.series(["copy:js"]));
        gulp.watch("./src/**/*.html", gulp.series(["copy:html"]))

 

answered