We Keep Coding

Gulp Error: Assertion Error [ERR_ASSERTION]: Task function must be specified

I am new to javascript I was trying to run some repositories from GitHub, I have installed all the necessary updates also done npm audit --force but still I am getting this error. Any help will be appreciated.
Code :
PS D:\agario clone\agar.io-clone-master> npm start
> agar-clone#1.0.0 start D:\agario clone\agar.io-clone-master
> gulp run
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (D:\agario clone\agar.io-clone-master\node_modules\undertaker\lib\set-task.js:10:3)
at Gulp.task (D:\agario clone\agar.io-clone-master\node_modules\undertaker\lib\task.js:13:8)
at Object.<anonymous> (D:\agario clone\agar.io-clone-master\gulpfile.js:13:6)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at requireOrImport (D:\agario clone\agar.io-clone-master\node_modules\gulp\node_modules\gulp-cli\lib\shared\require-or-import.js:19:11) {
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: false,
expected: true,
operator: '=='
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! agar-clone#1.0.0 start: `gulp run`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the agar-clone#1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\cordt\AppData\Roaming\npm-cache\_logs\2021-09-27T11_34_53_151Z-debug.log
Here is my gulpfile.js
var gulp = require('gulp');
var babel = require('gulp-babel');
var jshint = require('gulp-jshint');
var nodemon = require('gulp-nodemon');
var uglify = require('gulp-uglify');
var util = require('gulp-util');
var mocha = require('gulp-mocha');
var todo = require('gulp-todo');
var webpack = require('webpack-stream');
var fs = require('fs');
gulp.task('build', ['build-client', 'build-server', 'test']);
gulp.task('test', ['lint'], function () {
gulp.src(['test/**/*.js'])
.pipe(mocha());
});
gulp.task('lint', function () {
return gulp.src(['**/*.js', '!node_modules/**/*.js', '!bin/**/*.js'])
.pipe(jshint({
esnext: true
}))
.pipe(jshint.reporter('default', { verbose: true}))
.pipe(jshint.reporter('fail'));
});
gulp.task('build-client', ['lint', 'move-client'], function () {
return gulp.src(['src/client/js/app.js'])
.pipe(uglify())
.pipe(webpack(require('./webpack.config.js')))
.pipe(babel({
presets: [
['es2015', { 'modules': false }]
]
}))
.pipe(gulp.dest('bin/client/js/'));
});
gulp.task('move-client', function () {
return gulp.src(['src/client/**/*.*', '!client/js/*.js'])
.pipe(gulp.dest('./bin/client/'));
});
gulp.task('build-server', ['lint'], function () {
return gulp.src(['src/server/**/*.*', 'src/server/**/*.js'])
.pipe(babel())
.pipe(gulp.dest('bin/server/'));
});
gulp.task('watch', ['build'], function () {
gulp.watch(['src/client/**/*.*'], ['build-client', 'move-client']);
gulp.watch(['src/server/*.*', 'src/server/**/*.js'], ['build-server']);
gulp.start('run-only');
});
gulp.task('todo', ['lint'], function() {
gulp.src('src/**/*.js')
.pipe(todo())
.pipe(gulp.dest('./'));
});
gulp.task('run', ['build'], function () {
nodemon({
delay: 10,
script: './server/server.js',
cwd: "./bin/",
args: ["config.json"],
ext: 'html js css'
})
.on('restart', function () {
util.log('server restarted!');
});
});
gulp.task('run-only', function () {
nodemon({
delay: 10,
script: './server/server.js',
cwd: "./bin/",
args: ["config.json"],
ext: 'html js css'
})
.on('restart', function () {
util.log('server restarted!');
});
});
gulp.task('default', ['run']);
I am using this repo if you want to take a look at it? https://github.com/huytd/agar.io-clone

I have FOUND this helpfull for migration to Gulp#4.0.0
https://www.sitepoint.com/how-to-migrate-to-gulp-4/

Build error occurred ReferenceError: describe is not defined > During now.sh deployment

I'm using now.sh to deploy my nextjs (React) app. And the build is failing due to this error:
Build error occurred
ReferenceError: describe is not defined
Not sure why this started happening, here is my .babelrc
{
"env": {
"development": {
"compact": false,
"presets": [
"next/babel",
"#zeit/next-typescript/babel"
],
"plugins": [
["styled-components", {"ssr": true, "displayName": true}],
["#babel/plugin-proposal-decorators", {"legacy": true}]
]
},
"production": {
"presets": [
"next/babel",
"#zeit/next-typescript/babel"
],
"plugins": [
["styled-components", {"ssr": true, "displayName": true}],
["#babel/plugin-proposal-decorators", {"legacy": true}]
]
},
"test": {
"compact": false,
"presets": [
"#babel/preset-typescript",
["next/babel", {"preset-env": { "modules": "commonjs" }}]
],
"plugins": [
["styled-components", { "ssr": true, "displayName": true }],
["#babel/plugin-proposal-decorators", { "legacy": true }],
["babel-plugin-sass-vars"]
]
}
}
}
package.json
"engines" : {
"node" : ">=8.10.0 <11.0.0"
},
"scripts": {
"dev": "NODE_ENV=development next -p 7777",
"build": "NODE_ENV=production next build",
"start": "next -p 7777",
"test": "NODE_ENV=test jest --no-cache",
"test-watch": "NODE_ENV=test jest --watch --no-cache",
"coverage": "NODE_ENV=test jest --coverage",
"update-snap": "NODE_ENV=test jest --updateSnapshot"
},
Full log:
running "npm run now-build"
> moon.holdings#2.0.0 now-build /tmp/7418164
> next build
Creating an optimized production build ...
> Using external babel configuration
> Location: "/tmp/7418164/.babelrc"
> Build error occurred
ReferenceError: describe is not defined
at Module.kAI8 (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:63996:1)
at __webpack_require__ (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:23:31)
at module.exports.+3sd.exports.__esModule (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:91:18)
at Object.<anonymous> (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:94:10)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
npm
ERR! code ELIFECYCLE
The first test where the describe is used:
import React from 'react'
import { shallow } from 'enzyme'
import toJson from 'enzyme-to-json'
import About from '../about.tsx'
describe('<About /> component', () => {
describe('rendering', () => {
const wrapper = shallow(<About />);
it('should render a component matching the snapshot', () => {
const tree = toJson(wrapper);
expect(tree).toMatchSnapshot();
expect(wrapper).toHaveLength(1);
expect(wrapper.contains(<About/>));
});
});
});
next.config
module.exports = (phase, { defaultConfig }) => {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
}
]
}
// Note: Nextjs provides webpack above so you should not `require` it
// Perform customizations to webpack config
// Important: return the modified config
config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
return config
}
// ✅ Put the require call here.
const withTypescript = require('#zeit/next-typescript')
const withCSS = require('#zeit/next-sass')
// withCSS({target: 'serverless'})
return withTypescript(withCSS({
webpack(config, options) {
return config
}
}))
}

I removed the tests that covered the /pages directory. NextJS used pages for routing. Not sure why that was causing the problem, ran coverage and looks like pages wasn't necessary to cover.
Hoping for a better answer from someone at the NextJS / Now.sh team, and I'll select that.

Easy fix: https://github.com/zeit/next.js/issues/3728#issuecomment-523789071
pageExtensions: ['page.tsx']

An option that allows the tests inside pages folder:
change webpack settings direct in next.config.js
module.exports = {
webpack: (config, { webpack }) => {
config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
return config
}
}
It is ignoring whatever __tests__ folder found on the build process.

If you are looking to colocate non-page files with pages in the /pages directory, you can use Custom Page Extensions to force your pages to have a file extension of .page.js. Once that is setup, Next.js will ignore any files that don't have .page in the file extension.
next.config.js
module.exports = {
// Force .page prefix on page files (ex. index.page.tsx) so generated files can be included in /pages directory without Next.js throwing build errors
pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
}
I wrote some docs for this use case that have yet to be merged https://github.com/vercel/next.js/pull/22740. The docs link above now contains these changes.
The original Github issue where this was discovered is https://github.com/vercel/next.js/issues/3728#issuecomment-895568757.

Can't find the module after extension is installed

I'm trying to create VS Code extension. It works when fine when I develop, however when I create the package and install it to VS Code it is failing with following error:
ERR Cannot find module 'request': Error: Cannot find module 'request'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:602:15)
at Function.Module._load (internal/modules/cjs/loader.js:528:25)
at Function.t._load (c:\Users\USER\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:729:537)
at Function.t.getExtensionPathIndex.then.a._load (c:\Users\USER\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:691:639)
at Function.t.getExtensionPathIndex.then.r._load (c:\Users\USER\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:655:197)
at Module.require (internal/modules/cjs/loader.js:658:17)
at n (c:\Users\USER\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:15:874)
at openBambooPlanUrlInBrowser.GIT.getGitBranchFromFileName (C:\Users\USER\.vscode\extensions\dUSER.markdown-table-of-contents-0.0.1\out\extension.js:397:41)
at getGitBranchFromFileName.exec (C:\Users\USER\.vscode\extensions\dUSER.markdown-table-of-contents-0.0.1\out\extension.js:383:17)
at ChildProcess.exithandler (child_process.js:294:7)
at ChildProcess.emit (events.js:182:13)
at maybeClose (internal/child_process.js:961:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:248:5)
my code:
async openBambooPlanUrlInBrowser(fileName: string) {
new GIT().getGitBranchFromFileName(fileName, (branch: string) => {
var config: any = vscode.workspace.getConfiguration('markdown-table-of-contents').get('bitbucketRepositories');
for (var setting of config) {
if (fileName.toLowerCase().startsWith(setting.folder.toLowerCase())) {
branch = branch.replace('/', '-');
let bambooHost = vscode.workspace.getConfiguration('markdown-table-of-contents').get('atlassianBambooHost');
const request = require('request');
request(
{
url: `${bambooHost}/rest/api/latest/plan/${setting.bambooPlanKey}/branch/${branch}.json`,
headers: {
"Authorization": 'Basic ' + vscode.workspace.getConfiguration('markdown-table-of-contents').get('atlassianAuthHash')
}
},
(error: string, response: string, body: string) => {
let planKey = JSON.parse(body).key;
vscode.env.openExternal(vscode.Uri.parse(`${bambooHost}/browse/${planKey}`));
}
);
}
}
});
}
dependencies from package.json
"dependencies": {
"child_process": "^1.0.2",
"clipboardy": "^1.2.3",
"fs": "0.0.1-security",
"iconv-lite": "^0.4.24",
"path": "^0.12.7",
"request": "^2.88.0",
"util": "^0.11.1",
"xml2js": "^0.4.19",
"xmldom": "^0.1.27"
}
root folder:
.gitignore
.vscode
.vscodeignore
depl.bat
markdown-table-of-contents-0.0.1.vsix
node_modules
out
package-lock.json
package.json
src
tsconfig.json
tslint.json

For me the solution was to run npm install <package_name> (notice no "-g") from the extension's code root folder. Vscode puts the extension in its [extension folder][1], navigate there to do npm install.
Example: for linux/mac
cd ~/.vscode/extensions
cd your.extension
npm install
This automatically added it to the devDependencies as well, and the extension worked perfectly from there on.

Webpack Dynamic Config Loading Fails

I was following instructions to import config dynamically based on an environment variable using webpack. This is according to official documentation:
https://webpack.js.org/plugins/normal-module-replacement-plugin/
Example:
File: package.json
{
"name": "03_branching",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"develop": "webpack --mode development --watch",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"dependencies": {
"string-replace-loader": "^2.1.1",
"webpack": "~4.6.0"
},
"devDependencies": {
"webpack-cli": "^2.0.15"
}
}
Example:
File: configLoader.js
const fs = require('fs');
console.log('fs', fs);
const config = fs.readFileSync("./config/APP_ENV.json");
const properties = JSON.parse(config);
console.log("Environment: " + properties.environment);
console.log("HomepageUrl: " + properties.homepageUrl);
File: webpack.config.js
"use strict";
const webpack = require('webpack');
const path = require('path');
module.exports = function(env) {
console.log('NODE_ENV: ', env.NODE_ENV); // 'local'
let newEnv = 'local';
if (env.NODE_ENV !== undefined) {
newEnv = env.NODE_ENV;
}
console.log('newEnv', newEnv);
return {
target: 'web',
node: {
fs: 'empty'
},
entry: path.join(__dirname, "./", "configLoader.js"),
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
libraryTarget: 'var',
library: 'EntryPoint'
},
module: {
rules: [
{
test: /configLoader\.js$/,
loader: 'string-replace-loader',
options: {
search: 'APP_ENV',
replace: `${newEnv}`,
flags: 'i'
}
}
]
}
}
};
File: config/local.json
{
"environment": "local",
"homepageUrl": "http://localhost:8080"
}
File: config/production.json
{
"environment": "production",
"homepageUrl": "http://www.google.com"
}
I try and run node dist/bundle.js but I get the following error...
➜ 03_branching git:(master) ✗ node dist/bundle.js fs {} /Users/jamesmurphy/Development/Repos/clients/PacktPublishing/NodeJsDesignPatterns/Chapter08/exercises/03_branching/dist/bundle.js:1
(function (exports, require, module, __filename, __dirname) { var EntryPoint=function(n){var e={};function o(r){if(e[r])return e[r].exports;var t=e[r]={i:r,l:!1,exports:{}};return n[r].call(t.exports,t,t.exports,o),t.l=!0,t.exports}return o.m=n,o.c=e,o.d=function(n,e,r){o.o(n,e)||Object.defineProperty(n,e,{configurable:!1,enumerable:!0,get:r})},o.r=function(n){Object.defineProperty(n,"__esModule",{value:!0})},o.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return o.d(e,"a",e),e},o.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},o.p="",o(o.s=1)}([function(n,e){},function(n,e,o){const r=o(0);console.log("fs",r);const t=r.readFileSync("./config/production.json"),c=JSON.parse(t);console.log("Environment: "+c.environment),console.log("HomepageUrl: "+c.homepageUrl)}]);
TypeError: r.readFileSync is not a function
at Object.<anonymous> (/Users/jamesmurphy/Development/Repos/clients/PacktPublishing/NodeJsDesignPatterns/Chapter08/exercises/03_branching/dist/bundle.js:1:686)
at o (/Users/jamesmurphy/Development/Repos/clients/PacktPublishing/NodeJsDesignPatterns/Chapter08/exercises/03_branching/dist/bundle.js:1:186)
at /Users/jamesmurphy/Development/Repos/clients/PacktPublishing/NodeJsDesignPatterns/Chapter08/exercises/03_branching/dist/bundle.js:1:600
at Object.<anonymous> (/Users/jamesmurphy/Development/Repos/clients/PacktPublishing/NodeJsDesignPatterns/Chapter08/exercises/03_branching/dist/bundle.js:1:609)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
It works if I run
node configLoader.js
But if I run the webpack command:
webpack --env.NODE_ENV=production
node dist/bundle.js
It fails... How do you bundle all of the node core modules here using webpack? I'm using webpack version 4.6.0
Cheers!

You are using the wrong target.
readFileSync only exists in node. But you are compiling for web.
If you change your target to node, everything should work.
I suspect you don't want to load the config file on runtime, but compile different option depending on the environment?
If so, take a look at webpack-define-plugin. You can put your config in a variable without loading a file on runtime.
This will then also work in the browser.

dest.write is not a function in gulp with broswerify

I try to build my react project using gulp and browserify. But every time I try to build the bundle I get this error:
[16:19:54] Using gulpfile /var/www/html/new-webclass/gulpfile.js
[16:19:54] Starting 'build'...
[16:19:54] 'build' errored after 36 ms
[16:19:54] TypeError: gulp.src(...).pipe(...).pipe is not a function
at Gulp.<anonymous> (/var/www/html/new-webclass/gulpfile.js:80:6)
at module.exports (/var/www/html/new-webclass/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/var/www/html/new-webclass/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/var/www/html/new-webclass/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/var/www/html/new-webclass/node_modules/orchestrator/index.js:134:8)
at /usr/lib/node_modules/gulp-cli/lib/versioned/^3.7.0/index.js:46:20
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
at Module.runMain (module.js:592:11)
at run (bootstrap_node.js:394:7)
/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:623
var written = dest.write(chunk);
^
TypeError: dest.write is not a function
at write (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:623:24)
at flow (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:632:7)
at DestroyableTransform.pipeOnReadable (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:664:5)
at emitNone (events.js:86:13)
at DestroyableTransform.emit (events.js:185:7)
at emitReadable_ (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:448:10)
at emitReadable (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:444:5)
at readableAddChunk (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:187:9)
at DestroyableTransform.Readable.push (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:149:10)
at DestroyableTransform.Transform.push (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_transform.js:145:32)
TypeError: dest.write is not a function. Okay this is strange. I can't find any solution.
package.json (devDependencies only)
devDependencies": {
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"babelify": "^7.3.0",
"bootstrap-sass": "^3.3.7",
"browserify": "^13.1.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-pug": "^3.0.4",
"gulp-sass": "^2.3.2",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
}
Bellow is my gulpfile require section.
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const pug = require('gulp-pug');
const browserify = require('browserify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
And here the task I use for bundle.
gulp.task('build', function() {
return gulp.src('./react/index.jsx')
.pipe(browserify({
extensions: ['.jsx'],
debug: true,
cache: {},
packageCache: {},
fullPaths: true
}))
.pipe(babelify.configure({ presets: ['es2015', 'react', 'stage-0'] }))
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(gulp.dest('./public/react/'));
});
Is there another way to do the bundle? What is going wrong?

It took me a while (actually all day) to figure it out. The whole configuration was wrong. This is the right one:
gulp.task('build', function() {
return browserify({
extensions: ['.jsx', '.js'],
debug: true,
cache: {},
packageCache: {},
fullPaths: true,
entries: './react/index.js',
})
.transform(babelify.configure({
presets: ['es2015', 'react', 'stage-0'],
ignore: /(bower_components)|(node_modules)/
}))
.bundle()
.on("error", function (err) { console.log("Error : " + err.message); })
.pipe(source('bundle.js'))
.pipe(gulp.dest('./public/react'));
});
Src: Using React with ES6 and Browserify by wecodetheweb.com