npm run dev won't come to an end

user_9046799 0
Viewed 1746

I am trying to use vue in a laravel project. I followed the proper steps:

  1. i ran composer require laravel/ui
  2. i ran php artisan ui vue
  3. I included the in my main layout file app.blade.php
  4. i ran npm run dev

But when I go to my site, the component does not show and I get an errormessage in the console of the browser:

Uncaught ReferenceError: Vue is not defined

Then after some searching I also noticed that "npm run dev" is not coming to an end in my cmd-window. It says :

DONE Compiled succesfully in 4465ms
Your application is running here: http://localhost:8080

I can only stop it with Control-C.

So my hypotheses is that vue is not defined in the browser because npm run dev does not end.

I have going through all the steps of installing vue again, but no change.

<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>> Clearly my package.json file is wrong. It looks like this:

{
"name": "forum",
"version": "1.0.0",
"description": "Forum",
"author": "Hubert van Dongen <hmd19570@gmail.com>",
"private": true,
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "test": "npm run unit",
    "build": "node build/build.js"
},
"dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
},
"devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "bootstrap": "^4.0.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "jquery": "^3.2",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "popper.js": "^1.12",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "resolve-url-loader": "^2.3.1",
    "rimraf": "^2.6.0",
    "sass": "^1.20.1",
    "sass-loader": "^8.0.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue": "^2.5.17",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
},
"engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
},
"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
]

}

What I did is create a new laravel project and copy the package.json file from that project to my forum project. It looks like this:

{
"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.19",
    "cross-env": "^7.0",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.19",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.15.2",
    "sass-loader": "^8.0.0"
}

}

I would expect that this package.json would run with npm run dev. However, when I run "npm run dev" from my forum-folder, I get a bunch of errors:

C:\xampp\htdocs\forum>npm run dev

> @ dev C:\xampp\htdocs\forum
> npm run development


> @ development C:\xampp\htdocs\forum
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

'cross-env' is not recognized as an internal or external command,
operable program or batch file.
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.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\hmd\AppData\Roaming\npm-cache\_logs\2020-07-29T20_13_07_867Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev 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\hmd\AppData\Roaming\npm-cache\_logs\2020-07-29T20_13_07_893Z-debug.log

<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> I ran "npm install --save-dev cross-env" and then again "npm run dev". Result unfortunately:

C:\xampp\htdocs\forum>npm run dev

> @ dev C:\xampp\htdocs\forum
> npm run development


> @ development C:\xampp\htdocs\forum
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

The system cannot find the path specified.
events.js:287
      throw er; // Unhandled 'error' event
      ^

Error: spawn node_modules\webpack\bin\webpack.js ENOENT
    at notFoundError (C:\xampp\htdocs\forum\node_modules\←[4mcross-spawn←[24m\lib\enoent.js:6:26)
    at verifyENOENT (C:\xampp\htdocs\forum\node_modules\←[4mcross-spawn←[24m\lib\enoent.js:40:16)
    at ChildProcess.cp.emit (C:\xampp\htdocs\forum\node_modules\←[4mcross-spawn←[24m\lib\enoent.js:27:25)
←[90m    at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)←[39m
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess.cp.emit (C:\xampp\htdocs\forum\node_modules\←[4mcross-spawn←[24m\lib\enoent.js:30:37)
←[90m    at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)←[39m {
  code: ←[32m'ENOENT'←[39m,
  errno: ←[32m'ENOENT'←[39m,
  syscall: ←[32m'spawn node_modules\\webpack\\bin\\webpack.js'←[39m,
  path: ←[32m'node_modules\\webpack\\bin\\webpack.js'←[39m,
  spawnargs: [
    ←[32m'--progress'←[39m,
    ←[32m'--hide-modules'←[39m,
    ←[32m'--config=node_modules/laravel-mix/setup/webpack.config.js'←[39m
  ]
}
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.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\hmd\AppData\Roaming\npm-cache\_logs\2020-07-30T19_26_43_340Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev 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\hmd\AppData\Roaming\npm-cache\_logs\2020-07-30T19_26_43_370Z-debug.log

Any advice from people who know more about this than I do?

HUbert

laravel vue.js php
2 Answers

The dev server is supposed to keep running until you kill it explicitly. It can't tell when you've finished work and aren't going to make any more requests to it.

Your PHP is irrelevant when you're running the dev server (unless you are writing a separate webservice in PHP). You connect to http://localhost:8080 instead of whatever server is running your PHP, just like the instruction on the command line tells you.

If you want to do a production deployment and run the Vue application inside an HTML document generated from the PHP then follow the instructions on the Vue website.

Dorward_190680

Despite your good advice the problem has not been solved unfortunately. But I have learned a lot in the process.

I have decided to rebuild the project from scratch.

Kind regards,

HUbert

user_90467990
Related