We Keep Coding

Not working "serve" command for Vue js project

working with Laravel + Vue js. but when I try to start vue js using npm run serve command. it is en counting following error command in my cmd .
npm ERR! Missing script: "serve"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run
how could I fix this problem?
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"
},
"devDependencies": {
"axios": "^0.24.0",
"cross-env": "^7.0",
"laravel-mix": "^6.0.39",
"lodash": "^4.17.19",
"resolve-url-loader": "^3.1.0",
"sass": "^1.15.2",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.14"
},
"dependencies": {
"vue": "^2.6.14",
"vue-axios": "^3.3.7",
"vue-router": "^3.5.2",
"vue-sweetalert2": "^5.0.2"
}
}

This is not only vue js app. you are using vue with Laravel
If you want to create production build you have to run npm run prod.
If you working local then you should use npm run watch. it will use hot reload so it will detect file changes and create complied filed.
Note : you have to add resourse js & css file to webpack.mix.js file and define the destination to store complied file in public folder.
You don't have to use npm run serve because you are using vue js in laravel.

Check if you have the below content inside the package.json, if not add it and then try running the commands
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
// other commands
},
Edit:
If you are using cmd in windows.
Follow the below steps
Try deleting the node_modules folder and after that run npm i from the cmd.
Then try running npm run serve again and see if it works this time
if the above two steps don't work then install vue/cli service globally by running the command npm install #vue/cli-service -g and then follow step 1 and 2 sequentially

I did every steps and when i run npm run serve i got this:
PS C:\WINDOWS\System32\WindowsPowerShell\v1.0> npm run serve
npm ERR! Missing script: "serve"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Make Users\AppData\Local\npm-cache_logs\2023-01-23T15_13_24_934Z-debug-0.log

Project missing node_modules dir but npm intall fails

My project is missing it's node_modules dir. I've tried running npm install, but it fails like this:
...
npm WARN deprecated core-js#2.6.11: core-js#<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path C:\users\me\IdeaProjects\portal\cp-frontend\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\users\me\IdeaProjects\portal\cp-frontend\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! Building the projects in this solution one at a time. To enable parallel build, please add the "/m" switch.
npm ERR! Build started 10/1/2021 3:15:35 PM.
npm ERR! Project "C:\users\me\IdeaProjects\portal\cp-frontend\node_modules\node-sass\build\binding.sln" on node 1 (default targets).
npm ERR! ValidateSolutionConfiguration:
npm ERR! Building solution configuration "Release|x64".
npm ERR! Project "C:\users\me\IdeaProjects\portal\cp-frontend\node_modules\node-sass\build\binding.sln" (1) is building "C:\users\me\IdeaProjects\portal\cp-frontend\node_modules\node-sass\build\binding.vcxproj.metaproj" (2) on node 1 (default targets).
...
I've tried
npm install --global --production windows-build-tools#4.0.0
in powershell as administrator, then exit and re-enter powershell as administrator, then trying npm install but still get this error.
Any ideas? I've tried googling it, and the suggestion was npm install --global --production windows-build-tools#4.0.0 (without #4.0.0 that fails too).
Looking at the packages.json file, it lists these dependencies. I'm not sure if that is helpful or not.
{
"name": "customer-portal-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"antd": "^4.1.0",
"autoprefixer": "^9.7.6",
"axios": "^0.19.2",
"classnames": "^2.2.6",
"crypto-js": "^4.0.0",
"dayjs": "^1.8.23",
"node-sass": "^4.13.1",
"normalize.css": "^8.0.1",
"numeral": "^2.0.6",
"query-string": "^6.12.1",
"react": "^16.12.0",
"react-app-polyfill": "^1.0.6",
"react-dom": "^16.12.0",
"react-ga": "^2.7.0",
"react-helmet": "^6.1.0",
"react-hook-form": "^5.3.1",
"react-intercom": "^1.0.15",
"react-responsive-tabs": "^3.3.0",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.4.1",
"reactn": "^2.2.6",
"tailwindcss": "^1.2.0",
"victory": "^34.1.3"
},
"scripts": {
"start": "npm run tailwind:css && react-scripts start",
"build": "npm run tailwind:css && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.js -o src/tailwind.css"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"development": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
If I use npm start in the next level up dir, I get a popup regarding (but it's probably too early to do npm start since there's no node_modules dir and npm install fails)
Script: c:\Users\me\IdeaProjects\portal\cp-frontend\tailwind.js
Line: 32
Char: 7
Error: expected identifier, string or number
Code: 800A0404
Source: Microsoft JScript compilation error
Update 1:
Ran npm install node-gyp in the frontend dir and see similar errors as npm install. I can run that fine in the backend dir. I don't know why this dir fails. I have windows command prompt open as administrator in both cases..not sure if that would matter.
npm ERR! code 1
npm ERR! path C:\Users\me\IdeaProjects\portal\cp-frontend\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\me\IdeaProjects\portal\cp-frontend\node_modules\node-sass\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! Building the projects in this solution one at a time. To enable parallel build, please add the "/m" switch.
npm ERR! Build started 10/4/2021 8:35:00 AM.
npm ERR! Project "C:\Users\me\IdeaProjects\portal\cp-frontend\node_modules\node-sass\build\binding.sln" on node 1 (default targets).
npm ERR! ValidateSolutionConfiguration:
npm ERR! Building solution configuration "Release|x64".
npm ERR! Project "C:\Users\me\IdeaProjects\portal\cp-frontend\node_modules\node-sass\build\binding.sln" (1) is building "C:\Users\me\IdeaProjects\portal\cp-frontend\node_modules\node-sass\build\binding.vcxproj.metaproj" (2) on node 1 (default targets).
npm ERR! Project "C:\Users\me\IdeaProjects\portal\cp-frontend\node_modules\node-sass\build\binding.vcxproj.metaproj" (2) is building "C:\Users\me\IdeaProjects\portal\cp-frontend\node_modules\node-sass\build\src\libsass.vcxproj" (3) on node 1 (default targets).
npm ERR! C:\Users\me\IdeaProjects\portal\cp-frontend\node_modules\node-sass\build\src\libsass.vcxproj(20,3): error MSB4019: The imported project "C:\Microsoft.Cpp.Default.props" was not found. Confirm that the path in the <Import> declaration is correct, and that the file exists on disk.
...
Update2:
Tried npm cache clean --force. Then npm install sass, but it's still trying to do npm install node-sass.
npm ERR! code 1
npm ERR! path C:\Users\me\IdeaProjects\portal\cp-frontend\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\me\IdeaProjects\portal\cp-frontend\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! Building the projects in this solution one at a time. To enable parallel build, please add the "/m" switch.

Delete current folder node_modules and run npm as a regular user, non administrator/root.
Try ever possible avoid run npm commands as Administrator/Root, this is a pratice discouraged, because third's commands may be executed.

React Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'toFixed' of undefined

I am having an npm run build error. I didn't get this error on localhost, I got the error while deploying my .NetCore React app. I ran an npm update but that didn't fix anything. Could I please no what's failing here?
Here's my package.json:
{
"name": "InfrastructureConnect",
"version": "0.1.0",
"private": true,
"dependencies": {
"#progress/kendo-react-dialogs": "^2.8.0",
"react": "^16.0.0",
"react-cookie": "^4.0.3",
"react-dom": "^16.0.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.17",
"react-select": "^3.1.0",
"rimraf": "^2.6.2",
"swagger-ui": "^3.44.1"
},
"scripts": {
"start": "rimraf ./build && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Here is the error I get after I run npm run build:
Creating an optimized production build...
Failed to compile.
./node_modules/swagger-ui/dist/swagger-ui.css
Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'toFixed' of undefined
at Array.filter (<anonymous>)
at Array.filter (<anonymous>)
at Array.filter (<anonymous>)
at Array.forEach (<anonymous>)
at runMicrotasks (<anonymous>)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! InfrastructureConnect#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the InfrastructureConnect#0.1.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! C:\Users\abhiredd\AppData\Roaming\npm-cache\_logs\2021-03-10T21_51_45_254Z-debug.log

After multiple attempts to solve this, here's a few things that fixed it:
Package.json:
"swagger-ui": "^3.52.2"
Some sort of swagger component:
import React, { Component } from 'react';
import SwaggerUi, { presets } from 'swagger-ui';
import 'swagger-ui/dist/swagger-ui.css';
class SwaggerHelp extends Component {
displayName = SwaggerHelp.name;
componentDidMount() {
SwaggerUi({
dom_id: '#swaggerContainer',
url: `/swagger/v1/swagger.json`,
presets: [presets.apis],
docExpansion: 'none',
});
}
render() {
return (
<div id="swaggerContainer" />
);
}
}
export default SwaggerHelp;
Hopefully, this helps.

sh: 1: tailwind: not found when deploying to heroku

package.json:
"devDependencies": {
"tailwindcss": "^0.7.4"
},
"scripts": {
"tailwind:css": "tailwind build src/css/tailwind.src.css -c tailwind.js -o src/css/tailwind.css",
"start": "npm run tailwind:css && react-scripts start",
"build": "npm run tailwind:css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
error:
sh: 1: tailwind: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! client#0.1.0 tailwind:css: `tailwind build src/css/tailwind.src.css -c tailwind.js -o src/css/tailwind.css`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the client#0.1.0 tailwind:css script.

Even though (in my experience) some heroku deployments seem to somehow get away with tailwind in the devDependencies, moving it into your dependencies does fix this issue.
This can affect more than just tailwind, so you might need to move more than just tailwind across for your build to work.

Failure to run protractor from Node.js command prompt

Hope all is well. I'm setting up protractor for the first time through Node.js. This is provided as part of a tutorial on the AngularJS website under "Running E2E Tests":
https://docs.angularjs.org/tutorial
However, while executing protractor through the provided command "npm run protractor", I get the following error within the Node.js command prompt:
E/launcher - Process exited with error code 199
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" "protractor"
npm ERR! node v6.9.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! angular-phonecat#0.0.0 protractor: `protractor e2e-tests/protractor.conf.js`
npm ERR! Exit status 199
npm ERR!
npm ERR! Failed at the angular-phonecat#0.0.0 protractor script 'protractor e2e-tests/protractor.conf.js'.
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 angular-phonecat package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! protractor e2e-tests/protractor.conf.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular-phonecat
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular-phonecat
npm ERR! There is likely additional logging output above.
Here is the contents on the package.json file:
{
"name": "angular-phonecat",
"private": true,
"version": "0.0.0",
"description": "A tutorial application for AngularJS",
"repository": "https://github.com/angular/angular-phonecat",
"license": "MIT",
"devDependencies": {
"bower": "^1.7.7",
"http-server": "^0.9.0",
"jasmine-core": "^2.4.1",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-firefox-launcher": "^0.1.7",
"karma-jasmine": "^0.3.8",
"protractor": "^4.0.9"
},
"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "http-server ./app -a localhost -p 8000 -c-1",
"pretest": "npm install",
"test": "karma start karma.conf.js",
"test-single-run": "karma start karma.conf.js --single-run",
"preupdate-webdriver": "npm install",
"update-webdriver": "webdriver-manager update",
"preprotractor": "npm run update-webdriver",
"protractor": "protractor e2e-tests/protractor.conf.js",
"update-index-async": "node -e \"var fs=require('fs'),indexFile='app/index-async.html',loaderFile='app/bower_components/angular-loader/angular-loader.min.js',loaderText=fs.readFileSync(loaderFile,'utf-8').split(/sourceMappingURL=angular-loader.min.js.map/).join('sourceMappingURL=bower_components/angular-loader/angular-loader.min.js.map'),indexText=fs.readFileSync(indexFile,'utf-8').split(/\\/\\/##NG_LOADER_START##[\\s\\S]*\\/\\/##NG_LOADER_END##/).join('//##NG_LOADER_START##\\n'+loaderText+' //##NG_LOADER_END##');fs.writeFileSync(indexFile,indexText);\""
}
}
I don't know if anyone else has tried this same tutorial and is getting the same issue? Any help would be most appreciated, thank you.

So Protractor can be started in several ways, the most common are by directConnect or by seleniumAddress. Since no value was set in the e2e-tests/protractor.config.js file, the assumed value is directConnect. To get directConnect to work with the chrome browser, you'll need to get the latest chromedriver. To just install chromedriver:
./node_modules/.bin/webdriver-manager update --standalone=false --gecko=false
Or as suggested in the github angular-seed page which will download, in addition, the selenium standalone jar file and gecko driver (which is used for firefox):
npm update-webdriver