Not working "serve" command for Vue js project - javascript

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

Related

How to correctly setup npm onchange scripts?

I'm trying to create a basic npm script to build my personal web projects, basically want to compile and minify Sass and JS ES6+ code. I'm new to npm scripts, but below is what I managed to do with the resources I found.
This is what I have so far:
"scripts": {
"devserver": "live-server --open=/dist/",
"sass": "node-sass --output-style compressed -o scss/ dist/css/ -w",
"terser": "terser src/js/index.js -c -m -o dist/js/index.js",
"watch:sass": "onchange 'scss/*.scss' -- npm run sass",
"watch:js": "onchange 'js/*.js' -- npm run terser",
"start": "npm-run-all --parallel devserver watch:*"
},
"devDependencies": {
"autoprefixer": "^9.8.6",
"node-sass": "^4.14.1",
"npm-run-all": "^4.1.5",
"postcss-cli": "^7.1.2",
"terser": "^5.3.0"
}
Couple of things I notice:
When I do npm run start the live server kicks in and loads the site and when I change the js or scss code the script register the changes but these are not reflected in the dist/ folder
Only when I run say npm run sass or npm run terser the changes do happen inside the dist/ folder
What am I missing or doing wrong?

postcss is processing /css/app.css and throwing CssSyntaxError after import vue2-daterange-picker

I'm writing a SPA with vue in a laravel project, and build assets with laravel mix(npm run watch etc.)
Everything is fine before I import vue2-daterange-picker in a vue component.
npm run watch
and
npm run develop
are good.
But when I run
npm run production
It throws an error like this
> # production /my-project
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
CssSyntaxError: /css/app.css:3:19: Missed semicolon
at Input.error (/my-project/node_modules/postcss/lib/input.js:130:16)
at Parser.checkMissedSemicolon (/my-project/node_modules/postcss/lib/parser.js:603:22)
at Parser.decl (/my-project/node_modules/postcss/lib/parser.js:286:46)
at Parser.other (/my-project/node_modules/postcss/lib/parser.js:166:12)
at Parser.parse (/my-project/node_modules/postcss/lib/parser.js:77:16)
at parse (/my-project/node_modules/postcss/lib/parse.js:17:12)
at new LazyResult (/my-project/node_modules/postcss/lib/lazy-result.js:60:16)
at Processor.<anonymous> (/my-project/node_modules/postcss/lib/processor.js:138:12)
at Processor.process (/my-project/node_modules/postcss/lib/processor.js:117:23)
at Function.creator.process (/my-project/node_modules/postcss/lib/postcss.js:148:43)
at OptimizeCssAssetsWebpackPlugin.processCss (/my-project/node_modules/optimize-css-assets-webpack-plugin/src/index.js:73:21)
at Object.processor (/my-project/node_modules/optimize-css-assets-webpack-plugin/src/index.js:13:18)
at each (/my-project/node_modules/last-call-webpack-plugin/src/index.js:150:10)
at arrayEach (/my-project/node_modules/lodash/_arrayEach.js:15:9)
at forEach (/my-project/node_modules/lodash/forEach.js:38:10)
at OptimizeCssAssetsWebpackPlugin.process (/my-project/node_modules/last-call-webpack-plugin/src/index.js:147:5)
at compilation.hooks.optimizeChunkAssets.tapPromise.chunks (/my-project/node_modules/last-call-webpack-plugin/src/index.js:178:28)
at _next0 (eval at create (/my-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:17)
at _err0 (eval at create (/my-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
at taskRunner.run (/my-project/node_modules/terser-webpack-plugin/dist/index.js:321:9)
at step (/my-project/node_modules/terser-webpack-plugin/dist/TaskRunner.js:87:9)
at _cacache.default.get.then (/my-project/node_modules/terser-webpack-plugin/dist/TaskRunner.js:111:15)
at tryCatcher (/my-project/node_modules/bluebird/js/release/util.js:16:23)
at Promise._settlePromiseFromHandler (/my-project/node_modules/bluebird/js/release/promise.js:547:31)
at Promise._settlePromise (/my-project/node_modules/bluebird/js/release/promise.js:604:18)
at Promise._settlePromise0 (/my-project/node_modules/bluebird/js/release/promise.js:649:10)
at Promise._settlePromises (/my-project/node_modules/bluebird/js/release/promise.js:729:18)
at Promise._fulfill (/my-project/node_modules/bluebird/js/release/promise.js:673:18)
at Promise._resolveCallback (/my-project/node_modules/bluebird/js/release/promise.js:466:57)
at Promise._settlePromiseFromHandler (/my-project/node_modules/bluebird/js/release/promise.js:559:17)
at Promise._settlePromise (/my-project/node_modules/bluebird/js/release/promise.js:604:18)
at Promise._settlePromise0 (/my-project/node_modules/bluebird/js/release/promise.js:649:10)
at Promise._settlePromises (/my-project/node_modules/bluebird/js/release/promise.js:729:18)
at Promise._fulfill (/my-project/node_modules/bluebird/js/release/promise.js:673:18)
at Promise._resolveCallback (/my-project/node_modules/bluebird/js/release/promise.js:466:57)
at Promise._settlePromiseFromHandler (/my-project/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.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/user/.npm/_logs/2019-11-09T04_25_23_448Z-debug.log
The file /css/app.css mentioned in the error message was generated by laravel mix by the following line in webpack.mix.js.
mix.sass('resources/assets/sass/app.scss', 'public/css');
Here's 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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"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": {
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"cross-env": "^6.0.3",
"dateformat": "^3.0.3",
"jquery": "^3.4.1",
"laravel-mix": "^5.0.0",
"laravel-mix-polyfill": "^1.1.0",
"lodash": "^4.17.15",
"popper.js": "^1.16.0",
"resolve-url-loader": "^3.1.0",
"sass": "^1.23.3",
"sass-loader": "^8.0.0",
"vue": "^2.6.10",
"vue-i18n": "^8.15.0",
"vue-router": "^3.1.3",
"vue-template-compiler": "^2.6.10",
"vue2-daterange-picker": "^0.3.1",
"vuex": "^3.1.1"
},
"dependencies": {}
}
and my webpack.mix.js
let mix = require('laravel-mix');
require('laravel-mix-polyfill');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.version();
mix.babelConfig({
plugins: ['#babel/plugin-syntax-dynamic-import'],
});
mix.webpackConfig({
output: {
chunkFilename: 'js/[name].[chunkhash].js',
},
});
mix.polyfill({
enabled: true,
targets: [
'cover 99.5%',
],
});
mix.js('resources/assets/js/app.js', 'public/js');
mix.sass('resources/assets/sass/app.scss', 'public/css');
But I can still run
npm run production
but build CSS and JavaScript separately
// mix.js('resources/assets/js/app.js', 'public/js');
mix.sass('resources/assets/sass/app.scss', 'public/css');
mix.js('resources/assets/js/app.js', 'public/js');
// mix.sass('resources/assets/sass/app.scss', 'public/css');
How can I run
npm run production
just once?
I forked my own version of the library here (created PR), and npm run production starts to works.
But in Chrome, the console start throwing some error like this issue page described, and solved by the comment below.

Npm scripts always gives an error as "is not recognized as an internal or external command"

I have a lerna repo. There is devDependency to concurrently package from my root package.json. When I type "lerna bootstrap" to command line, it works properly and install all root and subPackages` dependencies to root node_modules folder. But when i type "npm start" it says: 'concurrently' is not recognized as an internal or external command. When i check node_modules/concurrently folder it exists without problem.
My start script is concurrently --kill-others "npm run start-client" "npm run start-server".
This situation same with webpack-dev-server. How can i fix this problem except reinstalling everything.
package.json:
{
"name": "x-workspace",
"private": true,
"workspaces": [
"packages/*"
],
"devDependencies": {
"concurrently": "3.5.0",
"lerna": "^2.11.0"
},
"scripts": {
"start": "concurrently --kill-others \"npm run start-client\" \"npm run start-server\"",
"build": "webpack --hot",
"start-client": "npm --prefix ./packages/client-app start",
"start-server": "cd ./packages/server-app && dotnet run",
"clean": "rimraf node_modules package-lock.json ./packages/client-app/package-lock.json"
}
}
I found problem. There is no .bin folder in root node_modules folder. This is result of updating yarn to 1.8.0. When i return back to yarn 1.6.0, it works perfectly.
Thanks to David R. and other users.
I believe you don't have the concurrently package installed globally, To confirm try executing the below command and check if it returns anything,
npm list -g concurrently
If you've received an --(empty) response, then you'll have to install it globally.
npm install -g concurrently
Hope this helps!.

React website not deploying to GitHub Pages

I've been using node.js/npm to deploy my React website to GitHub Pages but an error keeps showing up and not sure how to approach it. I have been looking around for solutions but there doesn't seem to be anything for this particular scenario:
I run the npm run build command for the completed application and add the correct GitHub Pages scripts in my package.json file below -
{
"name": "portfolio",
"version": "0.1.0",
"homepage": "https://darstnfrd.github.io/portfolio",
"private": true,
"dependencies": {
"bootstrap": "^4.0.0",
"gulp-sass": "^3.1.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"gh-pages": "^1.1.0"
}
}
Afterwards, I run npm install --save-dev gh-pages. From here, when I run npm run deploy this error below keeps emerging -
> portfolio#0.1.0 deploy C:\Users\darren\Desktop\react2018\portfolio
> gh-pages -d build
events.js:183
throw er; // Unhandled 'error' event
^
Error: spawn git ENOENT
at _errnoException (util.js:1022:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:190:19)
at onErrorNT (internal/child_process.js:372:16)
at _combinedTickCallback (internal/process/next_tick.js:138:11)
at process._tickCallback (internal/process/next_tick.js:180:9)
at Function.Module.runMain (module.js:686:11)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:608:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! portfolio#0.1.0 deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the portfolio#0.1.0 deploy 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\darren\AppData\Roaming\npm-cache\_logs\2018-03-12T02_09_20_837Z-debug.log
My GitHub Pages repository is ready to go. Additional actions I've tried are npm rm -rf node_modules, npm cache clean and reinstalling bootstrap dependency.
What exactly is the error? If any more information is needed, please let me know. Thank you very much!

Unable to run babel command on CLI

I am trying to install flow as docs suggests https://flow.org/en/docs/install/ It requires to install babel-cli to run babel.
I installed babel-cli using below command https://babeljs.io/docs/usage/cli/
npm install --save-dev babel-cli
> npm install --save-dev babel-cli
todo-app#0.1.0 D:\React JS\todo-app
`-- babel-cli#6.24.1
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.0.17 (node_modules\react-scripts\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN enoent ENOENT: no such file or directory, open 'D:\React JS\todo-app\node_modules\acorn-dynamic-import\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'D:\React JS\todo-app\node_modules\create-hmac\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'D:\React JS\todo-app\node_modules\create-hash\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'D:\React JS\todo-app\node_modules\diffie-hellman\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'D:\React JS\todo-app\node_modules\pbkdf2\package.json'
package.json
{
"name": "todo-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.0.5",
"react-tap-event-plugin": "^2.0.1",
"redux": "^3.6.0"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"react-scripts": "1.0.7",
"redux-devtools": "^3.4.0",
"webpack": "^2.6.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
When I run babel command then it gives me an error 'babel' is not recognized as an internal or external command, operable program or batch file.
Update
It is because "local binaries probably aren't found because the local ./node_modules/.bin is not in $PATH" - but do you think Is it good to add node_modules/.bin of all projects in a $PATH ? or Is there any alternative to do ?
PS: I am on windows machine.
Add a babel script in your package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"babel": "babel"
}
Then you can run babel with:
npm run babel
If you want to pass arguments when running from the command line, separate them from the command with -- (more info). For example:
npm run babel -- --help
This way you run the version of babel specified in package.json and installed by npm and you do not need to edit your PATH variable.
Note: This is the same approach as flow recommends for itself in its installation instructions,. (Switch it to npm at the top then scroll down to "Setup Flow")

Categories