How to running command npm run in visual studio code? - visual-studio

I'm trying to do that by watching the video. but I get an error at 09:40 minutes in the video.
Here is the video link
I am running this command in the terminal; npm run json:server and I get the following error.
My terminal error:
C:\Users\Yavuz\Desktop\JSONSERVER>npm run json:server
> jsonserver#1.0.0 json:server C:\Users\Yavuz\Desktop\JSONSERVER
> json-server --watch db.json
module.js:540
throw err;
^
Error: Cannot find module 'color-convert'
at Function.Module._resolveFilename (module.js:538:15)
at Function.Module._load (module.js:468:25)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (C:\Users\Yavuz\Desktop\JSONSERVER\node_modules\ansi-styles\index.js:2:22)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! jsonserver#1.0.0 json:server: `json-server --watch db.json`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the jsonserver#1.0.0 json:server 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\Yavuz\AppData\Roaming\npm-cache\_logs\2018-04- 13T21_32_40_798Z-debug.log
package.json
{
"name": "jsonserver",
"version": "1.0.0",
"description": "Fake REST API for testing",
"main": "index.js",
"scripts": {
"json:server": "json-server --watch db.json"
},
"author": "",
"license": "ISC",
"dependencies": {
"json-server": "^0.12.1"
}
}
db.json
{
"users":[
{
"id":"1",
"firstName":"John",
"lastName":"Doe",
"email":"john#gmail.com",
"age":34,
"companyId":"1"
},
{
"id":"2",
"firstName":"Mark",
"lastName":"Doe",
"email":"mark#gmail.com",
"age":32,
"companyId":"2"
}
],
"companies":[
{
"id":"1",
"name":"Apple",
"description":"This is very good firm."
},
{
"id":"2",
"name":"Microsoft",
"description":"This is good firm."
}
]
}

Looks like you are missing the color-convert module. Try running npm install --save color-convert. This module will be added in your package.json as a dependency.

Related

Heroku 'sh: 1: next: not found'

Please help, I am having this issue while deploying my nextjs app in Heroku, the app runs fine locally.
Below is the log from Heroku and my package.json file.
Log:
2021-08-13T07:26:20.752659+00:00 app[web.1]:
2021-08-13T07:26:20.752685+00:00 app[web.1]: > # start /app
2021-08-13T07:26:20.752688+00:00 app[web.1]: > next start -p $PORT
2021-08-13T07:26:20.752689+00:00 app[web.1]:
2021-08-13T07:26:20.763505+00:00 app[web.1]: sh: 1: next: not found
2021-08-13T07:26:20.769117+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2021-08-13T07:26:20.769496+00:00 app[web.1]: npm ERR! syscall spawn
2021-08-13T07:26:20.769568+00:00 app[web.1]: npm ERR! file sh
2021-08-13T07:26:20.769636+00:00 app[web.1]: npm ERR! errno ENOENT
2021-08-13T07:26:20.772506+00:00 app[web.1]: npm ERR! # start: `next start -p $PORT`
2021-08-13T07:26:20.772533+00:00 app[web.1]: npm ERR! spawn ENOENT
package.json:
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start -p $PORT"
},
"dependencies": {
"#heroicons/react": "^1.0.3",
"next": "latest",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"tailwind-scrollbar-hide": "^1.0.3"
},
"devDependencies": {
"autoprefixer": "^10.2.6",
"postcss": "^8.3.5",
"tailwindcss": "^2.2.4"
}
}

Node-sass not compiling

Trying to make css files from scss with node-sass.
My package.json:
{
"name": "hello-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"scss": "node-sass -watch scss -o css"
},
"author": "",
"license": "ISC",
"devDependencies": {
"sass": "^1.26.10",
"sass-loader": "^9.0.3",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.11"
},
"dependencies": {
"node-sass": "^4.14.1"
}
}
But when i try npm run scss i see this error:
> node-sass -watch scss -o css
internal/validators.js:120
throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
^
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
at validateString (internal/validators.js:120:11)
at Object.extname (path.js:1229:5)
at getOptions (/Users/mac/Documents/Website/node_modules/node-sass/bin/node-sass:192:40)
at Object.<anonymous> (/Users/mac/Documents/Website/node_modules/node-sass/bin/node-sass:376:15)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47 {
code: 'ERR_INVALID_ARG_TYPE'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! hello-webpack#1.0.0 scss: `node-sass -watch scss -o css`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the hello-webpack#1.0.0 scss 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/mac/.npm/_logs/2020-08-20T14_02_52_371Z-debug.log
What's wrong with path? It's correct, i got directories scss & css, and have some files in both.
You're using the watch option with the full name which requires 2 dashes:
node-sass scss --watch -o css
Otherwise use 1 dash with the shorthand w name:
node-sass scss -w -o css
https://www.npmjs.com/package/node-sass#command-line-interface

Getting "npm start" error when deploy Node JS app to Heroku server

I'm getting this error when i deploy my NodeJS app to Heroku server.
2019-08-27T05:54:03.597197+00:00 heroku[web.1]: State changed from starting to crashed
2019-08-27T05:54:03.569746+00:00 heroku[web.1]: Process exited with status 1
2019-08-27T05:59:55.107447+00:00 heroku[web.1]: State changed from crashed to starting
2019-08-27T05:59:58.079934+00:00 heroku[web.1]: Starting process with command `npm start`
2019-08-27T06:00:00.687008+00:00 heroku[web.1]: State changed from starting to crashed
2019-08-27T06:00:00.660988+00:00 heroku[web.1]: Process exited with status 1
2019-08-27T06:00:00.452248+00:00 app[web.1]: > realtime-chat#1.0.0 start /app
2019-08-27T06:00:00.452250+00:00 app[web.1]: > node index.js
2019-08-27T06:00:00.452252+00:00 app[web.1]:
2019-08-27T06:00:00.574510+00:00 app[web.1]: /app/index.js:1
2019-08-27T06:00:00.574514+00:00 app[web.1]: import express from "express";
2019-08-27T06:00:00.574517+00:00 app[web.1]: ^^^^^^^
2019-08-27T06:00:00.574519+00:00 app[web.1]:
2019-08-27T06:00:00.581327+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2019-08-27T06:00:00.581759+00:00 app[web.1]: npm ERR! errno 1
2019-08-27T06:00:00.582977+00:00 app[web.1]: npm ERR! realtime-chat#1.0.0 start: `node index.js`
2019-08-27T06:00:00.583139+00:00 app[web.1]: npm ERR! Exit status 1
2019-08-27T06:00:00.583436+00:00 app[web.1]: npm ERR!
2019-08-27T06:00:00.583640+00:00 app[web.1]: npm ERR! Failed at the realtime-chat#1.0.0 start script.
2019-08-27T06:00:00.583830+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2019-08-27T06:00:00.593702+00:00 app[web.1]:
My config: package.json file.
{
"name": "realtime-chat",
"version": "1.0.0",
"description": "sjc-realtimechat",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "babel-node index.js",
"postinstall": "bower cache clean && bower install"
},
"keywords": [
"sjc"
],
"author": "sjc-bui",
"license": "ISC",
"dependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"bcrypt": "^3.0.6",
"bluebird": "^3.5.5",
"body-parser": "^1.19.0",
"bower": "^1.8.8",
"connect-mongo": "^3.0.0",
"cookie-parser": "^1.4.4",
"dotenv": "^8.0.0",
"ejs": "^2.6.2",
"emojione": "^4.5.0",
"express": "^4.17.1",
"express-flash": "0.0.2",
"express-session": "^1.16.2",
"express-validator": "^6.1.1",
"fs-extra": "^7.0.1",
"google-translate": "^2.2.0",
"http": "0.0.0",
"https": "^1.0.0",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"mongoose": "^5.6.4",
"multer": "^1.4.1",
"nodemailer": "^4.4.2",
"passport": "^0.4.0",
"passport-google-oauth": "^2.0.0",
"passport-local": "^1.0.0",
"passport.socketio": "^3.7.0",
"request": "^2.88.0",
"socket.io": "^2.2.0",
"uuid": "^3.3.2"
},
"devDependencies": {}
}
My config: Procfile file
web: npm start
i'm trying to run babel-node index.js on server. but got this error
npm ERR! realtime-chat#1.0.0 start: node index.js
I was searching to fix it but still got this error. Please help.
Update
Dependences already installed but still got "npm start" error.
Update all required dependencies in your package.json.
package.json should be something similar to this :
{
"name": "sample name",
"version": "version details goes here",
"description": "description goes here",
"main": "index.js",
"scripts": {
"start": "babel-node index.js",
"dev": "nodemon --exec babel-node index.js",
"test": "mocha --require babel-core/register test/*.js",
"compile": "babel src --out-dir .compiled --source-maps --watch",
"postinstall": "bower cache clean && bower install"
},
"dependencies": {
"express": "^4.9.8",
"other dependencies"
},
"engines": {
"node": "put node version details here"
}
}
update your bablerc file as below:
babelrc content
{
"presets": ["#babel/preset-env"]
}
Babel node is missing from your dependencies list.
also, see this below guide for more details:
https://devcenter.heroku.com/articles/deploying-nodejs
you cannot use
import express from "express"
this is ES-15 modules and Node.js does not support this. React supports this. node.js runtime has support for common.js modules which should be like this:
const express=require("express")

Laravel mix always undefined in mix v4+

Any call to npm run after upgrading to Mix v4.x results in mix being undefined. I see errors like this on every run:
> npm run development
> # development /project
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
/project/node_modules/webpack-cli/bin/cli.js:235
throw err;
^
TypeError: Cannot read property 'js' of undefined
at Object.<anonymous> (/project/webpack.mix.js:15:5)
at Module._compile (/project/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
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 Module.require (internal/modules/cjs/loader.js:657:17)
at require (/project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object.<anonymous> (/project/node_modules/laravel-mix/setup/webpack.config.js:12:1)
at Module._compile (/project/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
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 Module.require (internal/modules/cjs/loader.js:657:17)
at require (/project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at WEBPACK_OPTIONS (/project/node_modules/webpack-cli/bin/convert-argv.js:113:13)
at requireConfig (/project/node_modules/webpack-cli/bin/convert-argv.js:115:6)
at /project/node_modules/webpack-cli/bin/convert-argv.js:122:17
at Array.forEach (<anonymous>)
at module.exports (/project/node_modules/webpack-cli/bin/convert-argv.js:120:15)
at yargs.parse (/project/node_modules/webpack-cli/bin/cli.js:232:39)
at Object.parse (/project/node_modules/yargs/yargs.js:567:18)
at /project/node_modules/webpack-cli/bin/cli.js:210:8
at Object.<anonymous> (/project/node_modules/webpack-cli/bin/cli.js:500:3)
at Module._compile (internal/modules/cjs/loader.js:721:30)
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 Module.require (internal/modules/cjs/loader.js:657:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.<anonymous> (/project/node_modules/webpack/bin/webpack.js:155:2)
at Module._compile (internal/modules/cjs/loader.js:721:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I'm running this with Laravel 5.5. I upgraded package.json to match the version in the laravel repo that is used with mix v4.
Here is my 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 --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"
},
"devDependencies": {
"accounting": "^0.4.1",
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"bootstrap-sass": "^3.4.0",
"cross-env": "^5.2.0",
"fancybox": "^3.0.1",
"jquery": "^3.3.1",
"jquery-slimscroll": "^1.3.8",
"ladda": "^2.0.1",
"laravel-mix": "^4.0.13",
"locutus": "^2.0.10",
"metismenu": "^2.7.9",
"moment": "^2.23.0",
"vue": "^2.5.21",
"webpack": "^4.28.3",
"webpack-cli": "^3.2.0"
},
"dependencies": {
"ajv": "^6.6.2",
"bootstrap-vue": "^2.0.0-rc.11",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"imagemin": "^6.0.0",
"jsonexport": "^2.4.1",
"laravel-echo": "^1.5.2",
"lodash": "^4.17.11",
"node-sass": "^4.11.0",
"pusher-js": "^4.3.1",
"sweetalert2": "^7.32.4",
"vue-api-query": "^1.2.0",
"vue-events": "^3.1.0",
"vue-multiselect": "^2.1.3",
"vue-sweetalert2": "^1.6.3",
"vuetable-2": "^2.0.0-beta.4",
"vuex": "^3.0.1"
}
}
My webpack.mix.js:
const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.version()
.sourceMaps();
I've tried deleting node_modules and yarn install again but that doesn't fix it.
If I downgrade to v3, there are no issues other than problems compiling some SASS.
npm v6.4.1
node v11.5.0
yarn v1.12.3
Without seeing your webpack.mix.js file it's hard to say what the problem could be. I cloned the Laravel 5.5 branch and upgraded to version ^4.0.13 of laravel-mix and successfully ran both yarn dev and yarn prod, although I am using more recent versions of npm and node.
NPM 6.5.0-next.0
Node 11.6.0
Yarn 1.12.3
Here's a GitHub repo to demo.
Update
// TypeError: Cannot read property 'js' of undefined
const { mix } = require('laravel-mix');
// works
const mix = require('laravel-mix');

How to lint indent based SASS?

I am trying to add linting for SugarSS to my project. I've added lint-staged command to my package.json:
"scripts": {
"lint-staged": "$(yarn bin)/lint-staged"
},
"lint-staged": {
...
"app/assets/styles/**/*.sass": [
"prettier --write",
"stylelint --fix --syntax sugarss",
"git add"
]
}
When I run npm run lint-staged it outputs
✖ prettier --write found some errors. Please fix them and try committing again.
[error] path/to/style.sass: SyntaxError: Unexpected token, expected ";" (3:16)
[error] 1 | h1.question
[error] 2 | overflow: visible
[error] > 3 | padding-right: 12px
[error] | ^
[error] 4 | color: #333
[error] 5 |
[error] 6 | #questions h4
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my_project#1.0.0 lint-staged: `$(yarn bin)/lint-staged`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my_project#1.0.0 lint-staged script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Seems like that eslint tries to lint my path/to/style.sass with the new SASS 3 syntax
How can I set up linting for SugarSS syntax in package.json? Thanks
I was able to set up linting for SugarSS with the following setup:
# .stylelintrc
{
"extends": "stylelint-config-sugarss-recommended"
}
And in package.json
{
"devDependencies": {
"stylelint-config-sugarss-recommended": "^1.1.0"
...
},
"scripts": {
"lint-staged": "$(yarn bin)/lint-staged"
},
"lint-staged": {
"app/assets/styles/**/*.sass": [
"stylelint --fix --syntax sugarss",
"git add"
],
...
},
"pre-commit": [
"lint-staged"
]
}

Resources