Develop Reference

Error: ENOENT: no such file or directory when using npm to build the project

when I using this command to build my project in macOS calalina(Intel Chip):
npm run build
shows error like this:
⠦ Building for production...
ERROR Failed to compile with 2 errors 11:15:12
error in ./src/components/FeatherIcon.vue?vue&type=style&index=0&lang=scss&
Error: ENOENT: no such file or directory, scandir '/Users/dabaidabai/.jenkins/workspace/be-zhuolian-org-frontend-fat/node_modules/node-sass/vendor'
# ./src/components/FeatherIcon.vue?vue&type=style&index=0&lang=scss& 1:0-506 1:0-506
# ./src/components/FeatherIcon.vue
# ./src/globalComponents.js
# ./src/main.js
# multi ./src/main.js
error in ./src/assets/scss/vuexy/extraComponents/agGridStyleOverride.scss
Error: ENOENT: no such file or directory, scandir '/Users/dabaidabai/.jenkins/workspace/be-zhuolian-org-frontend-fat/node_modules/node-sass/vendor'
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/zlpages/activepage/index.vue?vue&type=script&lang=js& 224:0-70
# ./src/views/zlpages/activepage/index.vue?vue&type=script&lang=js&
# ./src/views/zlpages/activepage/index.vue
# ./src/router.js
# ./src/main.js
# multi ./src/main.js
ERROR Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vuexy-vuejs-html-laravel-dashboard-admin-template#4.0.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vuexy-vuejs-html-laravel-dashboard-admin-template#4.0.0 build 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! /Users/dabaidabai/.npm/_logs/2021-12-15T03_15_12_736Z-debug.log
I have tried to use this command:
npm install
and this command execute success. what should I do to fix this problem? this is the package.json file of my project:
{
"name": "vuexy-vuejs-html-laravel-dashboard-admin-template",
"version": "4.0.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#chenfengyuan/vue-countdown": "^1.1.2",
"ag-grid-community": "^21.0.1",
"ag-grid-vue": "^21.0.1",
"algoliasearch": "^3.33.0",
"apexcharts": "^3.6.12",
"auth0-js": "^9.10.4",
"axios": "^0.19.0",
"chart.js": "^2.8.0",
"core-js": "2.6.5",
"echarts": "^4.2.1",
"element-ui": "^2.15.6",
"file-saver": "2.0.1",
"firebase": "7.13.2",
"instantsearch.css": "^7.3.1",
"jsonwebtoken": "^8.5.1",
"material-icons": "^0.3.1",
"perfect-scrollbar": "^1.4.0",
"postcss-rtl": "^1.5.0",
"prismjs": "^1.16.0",
"vee-validate": "^2.2.8",
"vue": "^2.6.10",
"vue-acl": "4.0.7",
"vue-apexcharts": "^1.3.5",
"vue-awesome-swiper": "^3.1.3",
"vue-backtotop": "^1.6.1",
"vue-chartjs": "^3.4.2",
"vue-clipboard2": "^0.3.0",
"vue-context": "4.0.0",
"vue-echarts": "^4.0.3",
"vue-feather-icons": "^5.0.0",
"vue-flatpickr-component": "^8.1.2",
"vue-form-wizard": "^0.8.4",
"vue-fullcalendar": "^1.0.9",
"vue-i18n": "^8.11.2",
"vue-instantsearch": "^2.2.1",
"vue-perfect-scrollbar": "^0.1.0",
"vue-prism-component": "^1.1.1",
"vue-property-decorator": "^8.1.1",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.6",
"vue-select": "^3.1.0",
"vue-simple-calendar": "^4.2.2",
"vue-simple-suggest": "^1.9.5",
"vue-star-rating": "^1.6.1",
"vue-tour": "^1.1.0",
"vue-tree-halower": "^1.8.0",
"vue-video-player": "^5.0.2",
"vue2-google-maps": "^0.10.6",
"vue2-hammer": "^2.1.2",
"vuedraggable": "^2.21.0",
"vuejs-datepicker": "^1.5.4",
"vuesax": "jd-0001/vuesax",
"vuex": "^3.1.1",
"xlsx": "^0.15.0"
},
"devDependencies": {
"#fullhuman/postcss-purgecss": "^1.2.0",
"#vue/cli-plugin-babel": "^3.7.0",
"#vue/cli-plugin-eslint": "^3.7.0",
"#vue/cli-service": "^3.7.0",
"axios-mock-adapter": "^1.17.0",
"babel-plugin-component": "^1.1.1",
"dayjs": "^1.10.7",
"node-sass": "^4.12.0",
"purgecss": "^1.3.0",
"sass-loader": "^7.1.0",
"script-loader": "0.7.2",
"tailwindcss": "^1.0.1",
"vue-template-compiler": "^2.6.10"
}
}
my node version is 15.14.0. npm version is 6.4.1.

Npm update or installing packages breaks the compiler

I have a recent project that my working on it.
I installed a vue package and the npm compiler broke, it cant compile anymore. I tried with other packages and always happens the same (or updating).
Error : npm WARN extract-text-webpack-plugin#3.0.2 requires a peer of webpack#^3.1.0 but none is installed. You must install peer dependencies yourself.
Also in the github page : [DEPRECATED] Please use https://github.com/webpack-contrib/mini-css-extract-plugin Extracts text from a bundle into a separate file
This happens from nowhere. Friday this was working fine.
Packages installed friday : purgecss , vue-instantsearch and algoliasearch.
After the npm update : the command npm run watch works but the app.css file has JS in it, very weird. The npm run production no longer works.
Error :
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
SyntaxError: Unexpected token � in JSON at position 0
at JSON.parse (<anonymous>)
at Object.parseSourceMapInput (C:\server\htdocs\myproject\node_modules\postcss\node_modules\source-map\lib\util.js:433:15)
at new SourceMapConsumer (C:\server\htdocs\myproject\node_modules\postcss\node_modules\source-map\lib\source-map-consumer.js:17:22)
at PreviousMap.consumer (C:\server\htdocs\myproject\node_modules\postcss\lib\previous-map.js:69:28)
at new Input (C:\server\htdocs\myproject\node_modules\postcss\lib\input.js:93:22)
at parse (C:\server\htdocs\myproject\node_modules\postcss\lib\parse.js:13:15)
at new LazyResult (C:\server\htdocs\myproject\node_modules\postcss\lib\lazy-result.js:60:16)
at Processor.<anonymous> (C:\server\htdocs\myproject\node_modules\postcss\lib\processor.js:138:12)
at Processor.process (C:\server\htdocs\myproject\node_modules\postcss\lib\processor.js:117:23)
at Function.creator.process (C:\server\htdocs\myproject\node_modules\postcss\lib\postcss.js:148:43)
at OptimizeCssAssetsWebpackPlugin.processCss (C:\server\htdocs\myproject\node_modules\optimize-css-assets-webpack-plugin\src\index.js:73:21)
at Object.processor (C:\server\htdocs\myproject\node_modules\optimize-css-assets-webpack-plugin\src\index.js:13:18)
at C:\server\htdocs\myproject\node_modules\last-call-webpack-plugin\src\index.js:150:10
at arrayEach (C:\server\htdocs\myproject\node_modules\lodash\_arrayEach.js:15:9)
at forEach (C:\server\htdocs\myproject\node_modules\lodash\forEach.js:38:10)
at OptimizeCssAssetsWebpackPlugin.process (C:\server\htdocs\myproject\node_modules\last-call-webpack-plugin\src\index.js:147:5)
at C:\server\htdocs\myproject\node_modules\last-call-webpack-plugin\src\index.js:178:28
at _next0 (eval at create (C:\server\htdocs\myproject\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:17)
at eval (eval at create (C:\server\htdocs\myproject\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:25:1)
at C:\server\htdocs\myproject\node_modules\terser-webpack-plugin\dist\index.js:321:9
at step (C:\server\htdocs\myproject\node_modules\terser-webpack-plugin\dist\TaskRunner.js:87:9)
at done (C:\server\htdocs\myproject\node_modules\terser-webpack-plugin\dist\TaskRunner.js:98:30)
at tryCatcher (C:\server\htdocs\myproject\node_modules\bluebird\js\release\util.js:16:23)
at Promise._settlePromiseFromHandler (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:547:31)
at Promise._settlePromise (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:604:18)
at Promise._settlePromise0 (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:649:10)
at Promise._settlePromises (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:729:18)
at Promise._fulfill (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:673:18)
at Promise._resolveCallback (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:466:57)
at Promise._settlePromiseFromHandler (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:559:17)
at Promise._settlePromise (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:604:18)
at Promise._settlePromise0 (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:649:10)
at Promise._settlePromises (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:729:18)
at Promise._fulfill (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:673:18)
at Promise._resolveCallback (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:466:57)
at Promise._settlePromiseFromHandler (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:559:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"lint": "eslint --fix --ext .js,.vue resources/js"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.17",
"#fortawesome/free-brands-svg-icons": "^5.8.1",
"#fortawesome/free-regular-svg-icons": "^5.8.1",
"#fortawesome/free-solid-svg-icons": "^5.8.1",
"#fortawesome/vue-fontawesome": "^0.1.6",
"#inotom/vue-go-top": "^1.1.0",
"algoliasearch": "^3.35.1",
"axios": "^0.18.1",
"bootstrap": "^4.3.1",
"instantsearch.css": "^7.3.1",
"jquery": "^3.4.1",
"js-cookie": "^2.2.0",
"popper.js": "^1.15.0",
"sweetalert2": "^8.10.0",
"v-tooltip": "^2.0.2",
"vform": "^1.0.0",
"vue": "^2.6.10",
"vue-awesome-swiper": "^3.1.3",
"vue-content-loader": "^0.2.2",
"vue-foldable": "^1.0.0",
"vue-fuse": "^2.1.2",
"vue-i18n": "^8.11.2",
"vue-instantsearch": "^2.6.0",
"vue-lazyload": "^1.3.3",
"vue-loading-overlay": "^3.2.0",
"vue-lodash": "^2.0.2",
"vue-meta": "^1.6.0",
"vue-notification": "^1.3.20",
"vue-observe-visibility": "^0.4.6",
"vue-router": "^3.0.6",
"vue-slider-component": "^3.0.42",
"vue-slim-tabs": "^0.4.0",
"vuelidate": "^0.7.4",
"vuex": "^3.1.0",
"vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.4.4",
"babel-eslint": "^10.0.1",
"cross-env": "^5.2.0",
"eslint": "^5.16.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-node": "^9.0.1",
"eslint-plugin-promise": "^4.1.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.2.2",
"extract-text-webpack-plugin": "^3.0.2",
"glob-all": "^3.1.0",
"laravel-mix": "^4.0.15",
"laravel-mix-versionhash": "^1.0.7",
"purgecss-webpack-plugin": "^1.6.0",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.6.10",
"webpack-bundle-analyzer": "^3.3.2"
}
}
if i remove the extract-text-webpack-plugin and install mini-css-extract-plugin :
C:\server\htdocs\myproject\node_modules\webpack-cli\bin\cli.js:93
throw err;
^
Error: Cannot find module 'extract-text-webpack-plugin'
Require stack:
- C:\server\htdocs\myproject\node_modules\laravel-mix-versionhash\src\index.js
- C:\server\htdocs\myproject\webpack.mix.js
- C:\server\htdocs\myproject\node_modules\laravel-mix\setup\webpack.config.js
- C:\server\htdocs\myproject\node_modules\webpack-cli\bin\utils\convert-argv.js
- C:\server\htdocs\myproject\node_modules\webpack-cli\bin\cli.js
- C:\server\htdocs\myproject\node_modules\webpack\bin\webpack.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)
at Function.Module._load (internal/modules/cjs/loader.js:690:27)
at Module.require (internal/modules/cjs/loader.js:852:19)
at require (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
at Object.<anonymous> (C:\server\htdocs\myproject\node_modules\laravel-mix-versionhash\src\index.js:7:27)
at Module._compile (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Module.require (internal/modules/cjs/loader.js:852:19)
at require (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
at Object.<anonymous> (C:\server\htdocs\myproject\webpack.mix.js:4:1)
at Module._compile (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Module.require (internal/modules/cjs/loader.js:852:19)
at require (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
at Object.<anonymous> (C:\server\htdocs\myproject\node_modules\laravel-mix\setup\webpack.config.js:12:1)
at Module._compile (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Module.require (internal/modules/cjs/loader.js:852:19)
at require (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
at WEBPACK_OPTIONS (C:\server\htdocs\myproject\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13)
at requireConfig (C:\server\htdocs\myproject\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6)
at C:\server\htdocs\myproject\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17
at Array.forEach (<anonymous>)
at module.exports (C:\server\htdocs\myproject\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15)
at C:\server\htdocs\myproject\node_modules\webpack-cli\bin\cli.js:71:45
at Object.parse (C:\server\htdocs\myproject\node_modules\webpack-cli\node_modules\yargs\yargs.js:567:18)
at C:\server\htdocs\myproject\node_modules\webpack-cli\bin\cli.js:49:8
at Object.<anonymous> (C:\server\htdocs\myproject\node_modules\webpack-cli\bin\cli.js:366:3)
at Module._compile (internal/modules/cjs/loader.js:959:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10) {
code: 'MODULE_NOT_FOUND',
webpack.mix.js
const path = require('path')
const fs = require('fs-extra')
const mix = require('laravel-mix')
require('laravel-mix-versionhash')
// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')
mix
.js('resources/js/app.js', 'public/dist/js')
.sass('resources/sass/app.scss', 'public/dist/css')
.disableNotifications()
if (mix.inProduction()) {
mix.versionHash()
} else {
mix.sourceMaps()
}
mix.webpackConfig({
plugins: [
// new BundleAnalyzerPlugin()
new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, 'resources/js/**/*.vue'),
path.join(__dirname, 'resources/js/**/*.js')
])
}),
],
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'~': path.join(__dirname, './resources/js')
}
},
output: {
chunkFilename: 'dist/js/[chunkhash].js',
path: mix.config.hmr ? '/' : path.resolve(__dirname, './public/build')
}
})
mix.then(() => {
if (!mix.config.hmr) {
process.nextTick(() => publishAseets())
}
})
function publishAseets () {
const publicDir = path.resolve(__dirname, './public')
if (mix.inProduction()) {
fs.removeSync(path.join(publicDir, 'dist'))
}
fs.copySync(path.join(publicDir, 'build', 'dist'), path.join(publicDir, 'dist'))
fs.removeSync(path.join(publicDir, 'build'))
}

nodejs: SyntaxError: Unexpected identifier

I'm taking a look at https://github.com/intoli/remote-browser. I'm working in win10 with node 11.5. I've followed the instructions at the bottom of the repo:
# Clone the repository.
git clone https://github.com/intoli/remote-browser.git
cd remote-browser
# Install the dependencies.
yarn install
# Build the project.
yarn build
# Run the tests.
yarn test
Now when I try to run it using :
$ node src/index.js
E:\ENVS\js\remote-browser\src\index.js:1
(function (exports, require, module, __filename, __dirname) { import Browser from './browser';
^^^^^^^
SyntaxError: Unexpected identifier
at new Script (vm.js:83:7)
at createScript (vm.js:267:10)
at Object.runInThisContext (vm.js:319:10)
at Module._compile (internal/modules/cjs/loader.js:684:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:774:12)
at executeUserCode (internal/bootstrap/node.js:342:17)
How can I get this working?
edit index.js:
import Browser from './browser';
import ConnectionProxy from './connections/proxy';
export default Browser;
export { Browser };
export { ConnectionProxy };
export * from './errors';
export * from './launchers';
edit2:
{
"name": "remote-browser",
"version": "0.0.15",
"description": "A low-level browser automation framework built on top of the Web Extensions API standard. ",
"main": "index.js",
"repository": "git#github.com:intoli/remote-browser.git",
"author": "Intoli, LLC <contact#intoli.com>",
"license": "BSD",
"scripts": {
"build": "Set NODE_ENV=production webpack --config webpack",
"build:web": "NODE_ENV=production webpack --config webpack/web-client.config.js",
"postversion": "git push && git push --tags",
"test": "npm run build && NODE_ENV=test mocha --exit --require babel-core/register",
"test-fast": "NODE_ENV=test mocha --exit --require babel-core/register --invert --grep Browser",
"watch": "NODE_ENV=development webpack --watch --config webpack"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.2",
"babel-loader": "^7.1.2",
"babel-plugin-transform-builtin-extend": "^1.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"clean-webpack-plugin": "^0.1.17",
"copy-webpack-plugin": "^4.2.1",
"eslint": "^4.11.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-import": "^2.8.0",
"imports-loader": "^0.7.1",
"jimp": "^0.2.28",
"mocha": "^4.0.1",
"null-loader": "^0.1.1",
"source-map-support": "^0.5.0",
"webextension-polyfill": "^0.2.1",
"webpack": "^3.8.1",
"webpack-chrome-extension-reloader": "^0.6.6"
},
"dependencies": {
"chromedriver": "^2.37.0",
"express": "^4.16.2",
"express-ws": "^3.0.0",
"geckodriver": "^1.11.0",
"isomorphic-fetch": "^2.2.1",
"portfinder": "^1.0.13",
"selenium-webdriver": "^4.0.0-alpha.1",
"simple-websocket": "^5.1.0",
"ws": "^3.3.2"
}
}

You can't run node src/index.js. When you run yarn build it will create a new folder dist in the root folder, which has all the source code. Go to this folder and find the index.js file, open this to learn more.

Everytime I get an Assertion error while running gulp in command line

I'm trying to run the command below but unfortunately I run into an error.
C:\Users\usver\Desktop\git test\git\Bootstrap4\conFusion>gulp
I got assertion error after running the above command. I reinstalled gulp and npm once again but got the same error.
My node version-v10.15.0
gulp version-
CLI version 2.0.1
Local version 4.0.2
assert.js:350
throw err;
^
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (C:\Users\usver\Desktop\git test\git\Bootstrap4\conFusion\node_modules\undertaker\lib\set-task.js:10:3)
at Gulp.task (C:\Users\usver\Desktop\git test\git\Bootstrap4\conFusion\node_modules\undertaker\lib\task.js:13:8)
at Object.<anonymous> (C:\Users\usver\Desktop\git test\git\Bootstrap4\conFusion\gulpfile.js:30:6)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
I m Using Windows 10 Operating System and VS Code as an editor.
gulp.js file:
'use strict';
var gulp=require('gulp'),
sass=require('gulp-sass'),
browserSync=require('browser-sync');
gulp.task('sass',function(){
return gulp.src('./css/*.scss')
.pipe(sass().on('error',sass.logerror))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch',function(){
gulp.watch('./css/*.scss',['sass']);
});
gulp.task('browser-sync',function(){
var files=[
'./*.html',
'./css/*.css',
'./js/*.js',
'./img/*.{png,jpg,gif}'
];
browserSync.init(files,{
server:{
baseDir:'./'
}
});
});
gulp.task('default',['browser-sync'],function(){
gulp.start('sass:watch');
});`
package.json file
{
"name": "confusion",
"version": "1.0.0",
"description": "This is a website for Ristorante Con Fusion",
"main": "index.html",
"scripts": {
"start": "npm run watch:all",
"test": "echo \"Error: no test specified\" && exit 1",
"lite": "lite-server",
"scss": "node-sass -o css/ css/",
"watch:scss": "onchange \"css/*.scss\" --npm run scss",
"watch:all": "parallelshell \"npm run watch:scss\" 'npm run lite'",
"clean": "rimraf dist",
"copyfonts": "copyfiles -f node_modules/font-awesome/fonts/* dist/fonts",
"imagemin": "imagemin img/* -o dist/img",
"usemin": "usemin contactus.html -d dist --htmlmin -o dist/contactus.html && usemin aboutus.html -d dist --htmlmin -o dist/aboutus.html && usemin index.html -d dist --htmlmin -o dist/index.html",
"build": "npm run clean && npm run copyfonts && npm run imagemin && npm run usemin"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.26.7",
"cssmin": "^0.4.3",
"del": "^3.0.0",
"grunt-browser-sync": "^2.2.0",
"grunt-cli": "^1.2.0",
"grunt-contrib-clean": "^1.1.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-cssmin": "^2.2.1",
"grunt-contrib-htmlmin": "^2.4.0",
"grunt-contrib-imagemin": "^3.1.0",
"grunt-contrib-uglify": "^3.3.0",
"grunt-contrib-watch": "^1.1.0",
"grunt-filerev": "^2.3.1",
"grunt-sass": "^2.1.0",
"grunt-usemin": "^3.1.1",
"gulp": "^4.0.2",
"gulp-sass": "^3.1.0",
"htmlmin": "0.0.7",
"jit-grunt": "^0.10.0",
"lite-server": "^2.3.0",
"node-sass": "^4.12.0",
"onchange": "^6.0.0",
"parallelshell": "^3.0.2",
"rimraf": "^2.6.2",
"time-grunt": "^1.4.0",
"uglifyjs": "^2.4.11",
"usemin-cli": "^0.5.1"
},
"dependencies": {
"bootstrap": "^4.3.1",
"bootstrap-social": "^5.1.1",
"font-awesome": "^4.7.0",
"grunt": "^1.0.4",
"jquery": "^3.4.1",
"popper.js": "^1.12.9"
}
}
I've include gulp.js and package.json file.

You are using gulp3 syntax in a gulp4 file.
Search your error message Task function must be specified and you will get lots of hits.
Change these lines:
gulp.task('sass:watch',function(){
// gulp.watch('./css/*.scss',['sass']);
gulp.watch('./css/*.scss', gulp.series('sass'));
// gulp.watch('./css/*.scss', 'sass'); // should work too
});
and
// gulp.task('default',['browser-sync'],function(){
//gulp.start('sass:watch');
// });
to
gulp.task('default', gulp.series('browser-sync', 'sass:watch'));
It looks like you were working off of an old gulp3 tutorial but look for some migration guides from gulp3 to gulp4 instead.

throw new Error(`Deprecation notice: CommonsChunkPlugin now only takes a single argument

i ma trying to build my angular application using webpack.
so I referred this link http://blog.teamtreehouse.com/26017-2
i created a webpack.config.js at package.json level and in package.json I included this line "bundle": "webpack"
when I run npm run bundle I am facing an error npm ERR! Failed at the sleeping#1.0.0 bundle script 'webpack'.
can you tell me how to fix it.
providing my code and eror below
folder structure
- webapp
- app
- app.module.ts
- package.json
-webpack.config.js
app.module.ts
import './rxjs-extensions';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule,ReactiveFormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
import {Base} from './components/base/base';
import {players} from './components/jumping/user';
require('./directives/yep-nope.controller');
require('./services/github-status.service');
require('./controllers/dashboard.controller');
import {
Routes,
RouterModule,
Router,
ActivatedRoute,
CanActivateChild,
CanDeactivate,
ActivatedRouteSnapshot,
RouterStateSnapshot
} from "#angular/router";
#NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
routing,
MultiselectDropdownModule,
AccordionModule
],
declarations: [
AppComponent,
Base,
jumping,
players
],
providers: [
SPORTSService],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
package.json
{
"name": "SPORTS",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings",
"test": "tsc && concurrently \"karma start karma.conf.js\"",
"bundle": "webpack"
},
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"#angular/upgrade": "2.0.0",
"#types/underscore": "^1.8.1",
"angular2-in-memory-web-api": "0.0.20",
"bootstrap": "^3.3.6",
"core-js": "^2.4.1",
"jquery": "^3.1.1",
"latest-version": "^2.0.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23"
},
"devDependencies": {
"concurrently": "^2.2.0",
"jasmine-core": "~2.4.1",
"jasmine-expect": "^3.0.1",
"jasmine-jquery": "^2.1.1",
"karma": "^1.2.0",
"karma-chrome-launcher": "^0.2.3",
"karma-cli": "^0.1.2",
"karma-coverage": "^1.1.1",
"karma-htmlfile-reporter": "^0.2.2",
"karma-jasmine": "^0.3.8",
"karma-jquery": "^0.1.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-typescript": "^2.1.4",
"karma-typescript-preprocessor": "^0.3.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.2",
"typings": "^1.3.2",
"webpack": "^3.7.1"
}
}
webpack.config.js
var webpack = require('webpack');
module.exports = {
context: __dirname + '/app',
entry: {
app: './app.js',
vendor: ['angular']
},
output: {
path: __dirname + '/js',
filename: 'app.bundle.js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
]
};
error
$ npm run bundle
$ npm run bundle
> sports#1.0.0 bundle C:\Users\webcomponent\src\main\webapp
> webpack
C:\Users\webcomponent\src\main\webapp\node_modules\webpack\lib\optimize\CommonsChunkPlugin.js:11
throw new Error(`Deprecation notice: CommonsChunkPlugin now only takes a single argument. Either an options
^
Error: Deprecation notice: CommonsChunkPlugin now only takes a single argument. Either an options
object *or* the name of the chunk.
Example: if your old code looked like this:
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js')
You would change it to:
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' })
The available options are:
name: string
names: string[]
filename: string
minChunks: number
chunks: string[]
children: boolean
async: boolean
minSize: number
at new CommonsChunkPlugin (C:\Users\webcomponent\src\main\webapp\node_modules\webpack\lib\optimize\CommonsChunkPlugin.js:11:10)
at Object.<anonymous> (C:\Users\webcomponent\src\main\webapp\webpack.config.js:13:13)
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.require (module.js:497:17)
at require (internal/module.js:20:19)
at requireConfig (C:\Users\webcomponent\src\main\webapp\node_modules\webpack\bin\convert-argv.js:97:18)
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "bundle"
npm ERR! node v6.11.2
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! sports#1.0.0 bundle: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sports#1.0.0 bundle script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the sports package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs sports
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls sports
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\webcomponent\src\main\webapp\npm-debug.log

In webpack.config.js, you should change this:
new webpack.optimize.CommonsChunkPlugin(
/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
to:
new webpack.optimize.CommonsChunkPlugin(
{name:"vendor", filename:"vendor.bundle.js",})
and that should work.