Npm update or installing packages breaks the compiler - javascript

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'))
}

Related

How to fix "cannot find module'./node'' while compiling with pkg

the nodejs script works when I do node main.js but when I compile it into an executable with pkg it gives me this error :
pkg/prelude/bootstrap.js:1876
throw error;
^
Error: Cannot find module './node'
Require stack:
C:\snapshot\project\node_modules\hookcord\node_modules\snekfetch\src\index.js
C:\snapshot\project\node_modules\hookcord\src\fire.js
C:\snapshot\project\node_modules\hookcord\src\index.js
C:\snapshot\project\node_modules\hookcord\index.js
C:\snapshot\project\main.js
If you want to compile the package/file into executable, please pay attention to compilation warnings and specify a literal in 'require' call. 2) If you don't want to compile the package/file into executable and want to 'require' it from filesystem (likely plugin), specify an absolute path in 'require' call using process.cwd() or process.execPath.
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at Module.require (pkg/prelude/bootstrap.js:1855:31)
at require (node:internal/modules/cjs/helpers:102:18)
at Object. (C:\snapshot\project\node_modules\hookcord\node_modules\snekfetch\src\index.js:3:19)
at Module._compile (pkg/prelude/bootstrap.js:1930:22)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\snapshot\project\node_modules\hookcord\node_modules\snekfetch\src\index.js',
'C:\snapshot\project\node_modules\hookcord\src\fire.js',
'C:\snapshot\project\node_modules\hookcord\src\index.js',
'C:\snapshot\project\node_modules\hookcord\index.js',
'C:\snapshot\project\main.js'
],
pkg: true
}
I have a similar error while packaging a NestJS application.
Here is my package.json file
{
"bin": "dist/main.js",
"pkg": {
"assets": [
"node_modules/**/*"
],
"outputPath": "bin",
"scripts": "dist/**/*.js",
"targets": [
"node14-linux-x64",
"node14-macos-x64"
]
},
"scripts": {
"prebuild": "rimraf dist",
"build": "nest build",
"build2": "pkg package.json",
"start": "nest start --watch",
"start:dev": "nest start --watch",
"start:prod": "node dist/main",
},
"dependencies": {
"#nestjs/common": "^7.0.0",
"#nestjs/core": "^7.0.0",
"#nestjs/platform-express": "^7.0.0",
"#nestjs/schedule": "^0.4.3",
"#nestjs/typeorm": "^7.1.4",
"#sentry/node": "^6.7.2",
"#sentry/tracing": "^6.7.2",
"axios": "^0.21.1",
"class-validator": "^0.12.2",
"fast-speedtest-api": "^0.3.2",
"jsonpath": "^1.1.0",
"moment": "^2.29.1",
"mysql": "^2.18.1",
"mysql2": "^2.2.5",
"querystring": "^0.2.1",
"queue-system": "^3.0.2",
"rimraf": "^3.0.2",
"rxjs": "^6.5.4",
"typeorm": "^0.2.27",
"winston": "^3.3.3",
"xml-js": "^1.6.11",
"xml2json": "^0.12.0"
},
"devDependencies": {
"#nestjs/cli": "^7.0.0",
"#nestjs/schematics": "^7.0.0",
"#nestjs/testing": "^7.0.0",
"#types/express": "^4.17.3",
"#types/node": "^13.9.1",
"#typescript-eslint/eslint-plugin": "3.9.1",
"#typescript-eslint/parser": "3.9.1",
"eslint": "7.7.0",
"eslint-plugin-import": "^2.20.1",
"ts-loader": "^6.2.1",
"ts-node": "9.0.0",
"tsconfig-paths": "^3.9.0",
"typescript": "^3.7.4"
}
}
The command I am running is: pkg package.json and it seems to run without any error. However, when running the binary I have similar errors:
error: Error: Cannot find module 'esprima'
Require stack:
- aesprim
1) If you want to compile the package/file into executable, please pay attention to compilation warnings and specify a literal in 'require' call. 2) If you don't want to compile the package/file into executable and want to 'require' it from filesystem (likely plugin), specify an absolute path in 'require' call using process.cwd() or process.execPath.
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)
at Function.resolve (internal/modules/cjs/helpers.js:107:19)
at Object.<anonymous> (/snapshot/app/node_modules/jsonpath/lib/aesprim.js:4:20)
at Module._compile (pkg/prelude/bootstrap.js:1930:22)
at Object.<anonymous> (/snapshot/app/node_modules/jsonpath/lib/aesprim.js:15:11)
at Module._compile (pkg/prelude/bootstrap.js:1930:22)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [ 'aesprim' ],
pkg: true
},
I tried to install esprima manually and create the package again, but the error is the same.
Thanks for your help

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.

Error: Cannot find module 'wrench', I'm getting this error, when i run gulp command

I have installed npm ,bower and gulp in both local and globally.Still i'm getting this error when i run gulp in that folder.
Error: Cannot find module 'wrench'
at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object.<anonymous> (/home/myPC/documents/workspace/frontend/gulpfile.js:10:14)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
Here is my gulpfile.js
'use strict';
var gulp = require('gulp');
var wrench = require('wrench');
wrench.readdirSyncRecursive('./gulp').filter(function (file)
{
return (/\.(js|coffee)$/i).test(file);
}).map(function (file)
{
require('./gulp/' + file);
});
gulp.task('default', ['clean'], function ()
{
gulp.start('build');
});
Here is my package.json
{
"name": "admin",
"version": "1.2.2",
"dependencies":
{},
"scripts":
{
"test": "gulp test"
},
"devDependencies":
{
"browser-sync": "~2.9.11",
"browser-sync-spa": "~1.0.3",
"chalk": "~1.1.1",
"del": "~2.0.2",
"eslint-plugin-angular": "~0.12.0",
"estraverse": "~4.1.0",
"gulp": "~3.9.0",
"gulp-angular-filesort": "~1.1.1",
"gulp-angular-templatecache": "~1.8.0",
"gulp-autoprefixer": "~3.0.2",
"gulp-connect-proxy": "^0.3.1",
"gulp-env": "^0.4.0",
"gulp-eslint": "~1.0.0",
"gulp-filter": "~3.0.1",
"gulp-flatten": "~0.2.0",
"gulp-inject": "~3.0.0",
"gulp-jsbeautifier": "^1.0.1",
"gulp-load-plugins": "~0.10.0",
"gulp-minify-css": "~1.2.1",
"gulp-minify-html": "~1.0.4",
"gulp-ng-annotate": "~1.1.0",
"gulp-ng-constant": "^1.1.0",
"gulp-protractor": "~1.0.0",
"gulp-rename": "~1.2.2",
"gulp-replace": "~0.5.4",
"gulp-rev": "~6.0.1",
"gulp-rev-replace": "~0.4.2",
"gulp-sass": "~2.0.4",
"gulp-size": "~2.0.0",
"gulp-sourcemaps": "~1.6.0",
"gulp-uglify": "~1.4.1",
"gulp-useref": "~1.3.0",
"gulp-util": "~3.0.6",
"http-proxy-middleware": "~0.9.0",
"karma": "~0.13.10",
"karma-angular-filesort": "~1.0.0",
"karma-coverage": "~0.5.2",
"karma-jasmine": "~0.3.6",
"karma-ng-html2js-preprocessor": "~0.2.0",
"karma-phantomjs-launcher": "~0.2.1",
"lodash": "~3.10.1",
"main-bower-files": "~2.9.0",
"phantomjs": "~1.9.18",
"uglify-save-license": "~0.4.1",
"wiredep": "~2.2.2",
"wrench": "~1.5.8"
},
"engines":
{
"node": ">=0.10.0"
}
}
Installed all the dependencies and everything but still I'm getting this error.
Install it locally again.
Run npm install --save-dev wrench.
Sometimes deleting the node_modules folder and running npm install fixes these kinds of error.
I faced the same issue at the beginning, so I ran the above command
npm install --save-dev wrench
later I got many other missing components, finally, I realized that I had an outdated version of npm, so I upgraded the npm to the latest version using this command
sudo npm i npm#latest -g
Then everything went well.
no need to do anything in this case just re-run
"npm install"

Getting an error related to Babel with ReactJs

I am suddenly getting the following error when I try to run my ReactJs project, it was working perfectly before but I am not sure what is causing this all of a sudden:
module.js:338
throw err;
^
Error: Cannot find module 'tapable'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:286:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (/Users/hilarl/Desktop/client/node_modules/webpack/lib/Compiler.js:6:15)
at Module._compile (module.js:434:26)
at Module._extensions..js (module.js:452:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/hilarl/Desktop/client/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:214:7)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
npm ERR! Darwin 14.1.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v4.0.0
npm ERR! npm v2.14.2
npm ERR! code ELIFECYCLE
npm ERR! # start: `babel-node --eval "require('./tools/start')().catch(err => console.log(err.stack))"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # start script 'babel-node --eval "require('./tools/start')().catch(err => console.log(err.stack))"'.
npm ERR! This is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! babel-node --eval "require('./tools/start')().catch(err => console.log(err.stack))"
npm ERR! You can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/hilarl/Desktop/client/npm-debug.log
{
"private": true,
"engines": {
"node": ">= 0.10",
"npm": ">= 2.1"
},
"dependencies": {
"babel": "5.8.21",
"classnames": "^2.1.3",
"eventemitter3": "1.1.1",
"express": "4.13.3",
"fastclick": "1.0.6",
"fbjs": "0.1.0-alpha.7",
"flux": "2.0.3",
"front-matter": "1.0.0",
"install": "^0.1.8",
"jade": "1.11.0",
"lodash": "3.10.1",
"normalize.css": "3.0.3",
"npm": "^2.14.1",
"react": "^0.14.0-rc1",
"react-addons-css-transition-group": "^0.14.0-rc1",
"react-addons-transition-group": "^0.14.0-rc1",
"react-dom": "^0.14.0-rc1",
"react-dropzone": "^2.1.0",
"react-image-placeholder": "^1.0.4",
"react-loader": "^1.4.0",
"react-masonry-component": "^1.0.4",
"react-routing": "0.0.4",
"react-tag-input": "^1.0.3",
"reactify": "^1.1.1",
"router": "^1.1.3",
"source-map-support": "0.3.2",
"superagent": "1.3.0"
},
"devDependencies": {
"autoprefixer-core": "^5.2.1",
"babel-eslint": "^4.0.5",
"babel-loader": "^5.3.2",
"browser-sync": "^2.8.2",
"css-loader": "^0.15.6",
"csscomb": "^3.1.8",
"cssnext": "^1.8.3",
"del": "^1.2.0",
"eslint": "^1.1.0",
"eslint-loader": "^1.0.0",
"eslint-plugin-react": "^3.2.2",
"gaze": "^0.5.1",
"git-push": "^0.1.1",
"glob": "^5.0.14",
"jest-cli": "^0.4.18",
"mkdirp": "^0.5.1",
"ncp": "^2.0.0",
"postcss": "^4.1.16",
"postcss-loader": "^0.5.1",
"postcss-nested": "^0.3.2",
"psi": "^1.0.6",
"react-hot-loader": "^1.2.8",
"replace": "^0.3.0",
"run-sequence": "^1.1.2",
"style-loader": "^0.12.3",
"url-loader": "^0.5.6",
"webpack": "^1.11.0",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^1.2.0"
},
"jest": {
"rootDir": "./src",
"scriptPreprocessor": "../preprocessor.js",
"unmockedModulePathPatterns": [
"react"
]
},
"scripts": {
"lint": "eslint src tools",
"csslint": "csscomb src/components --lint --verbose",
"csscomb": "csscomb src/components --verbose",
"test": "eslint src && jest",
"clean": "babel-node --eval \"require('./tools/clean')().catch(err => console.log(err.stack))\"",
"copy": "babel-node --eval \"require('./tools/copy')().catch(err => console.log(err.stack))\"",
"bundle": "babel-node --eval \"require('./tools/bundle')().catch(err => console.log(err.stack))\"",
"build": "babel-node --eval \"require('./tools/build')().catch(err => console.log(err.stack))\"",
"serve": "babel-node --eval \"require('./tools/serve')().catch(err => console.log(err.stack))\"",
"start": "babel-node --eval \"require('./tools/start')().catch(err => console.log(err.stack))\""
}
}
We think that you haven't provide enough information so to figure out your issue.
Try to remove your packages (ie:/Users/hilarl/Desktop/client/node_modules)
rm -R /Users/hilarl/Desktop/client/node_modules
Clean the npm cache:
npm cache clean
and after that retry to re-install packages
npm i
If it doesn't work, share your new error message

Categories

Resources