i am new to vue.js, just coming from react.js. the problem i am facing with the vue loader didn't happened at first. but from the second time the app crashes from starting the server.
npm run serve > [email protected] serve /home/riyad/Desktop/todo_wedevs/todo > vue-cli-service serve INFO Starting development server... ERROR Error: Cannot find module 'vue-loader-v16/package.json' Error: Cannot find module 'vue-loader-v16/package.json' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:613:15) at Function.Module._load (internal/modules/cjs/loader.js:539:25) at Module.require (internal/modules/cjs/loader.js:667:17) at require (internal/modules/cjs/helpers.js:20:18) at api.chainWebpack.webpackConfig (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/config/base.js:114:23) at webpackChainFns.forEach.fn (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/Service.js:236:40) at Array.forEach (<anonymous>) at Service.resolveChainableWebpackConfig (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/Service.js:236:26) at Service.resolveWebpackConfig (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/Service.js:240:48) at PluginAPI.resolveWebpackConfig (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/PluginAPI.js:132:25) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] serve: `vue-cli-service serve` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] serve 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/riyad/.npm/_logs/2020-08-20T11_40_44_196Z-debug.log
i have tried vue cli 3 and also 2..and installed different vue-loader..but the result is same my babble.config.js file->
const { VueLoaderPlugin } = require("vue-loader"); module.exports = { presets: ["@vue/cli-plugin-babel/preset"], plugins: [new VueLoaderPlugin()], };
package.json
{ "name": "todo", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", "uuid": "^8.3.0", "vue": "^3.0.0-0", "vuex": "^4.0.0-0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0-0", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0-0", "vue-loader": "^16.0.0-beta.3", "vue-template-compiler": "^2.6.11" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }
the log->
0 info it worked if it ends with ok 1 verbose cli [ '/home/riyad/.nvm/versions/node/v11.10.1/bin/node', 1 verbose cli '/home/riyad/.nvm/versions/node/v11.10.1/bin/npm', 1 verbose cli 'run', 1 verbose cli 'serve' ] 2 info using [email protected] 3 info using [email protected] 4 verbose run-script [ 'preserve', 'serve', 'postserve' ] 5 info lifecycle [email protected]~preserve: [email protected] 6 info lifecycle [email protected]~serve: [email protected] 7 verbose lifecycle [email protected]~serve: unsafe-perm in lifecycle true 8 verbose lifecycle [email protected]~serve: PATH: /home/riyad/.nvm/versions/node/v11.10.1/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/riyad/Desktop/todo_wedevs/todo/node_modules/.bin:/home/riyad/.nvm/versions/node/v11.10.1/bin:/home/riyad/.local/bin:/usr/local/bin:/usr/local/sbin:/usr/bin:/usr/lib/jvm/default/bin:/usr/bin/site_perl:/usr/bin/vendor_perl:/usr/bin/core_perl:/var/lib/snapd/snap/bin:/home/riyad/.yarn/bin 9 verbose lifecycle [email protected]~serve: CWD: /home/riyad/Desktop/todo_wedevs/todo 10 silly lifecycle [email protected]~serve: Args: [ '-c', 'vue-cli-service serve' ] 11 silly lifecycle [email protected]~serve: Returned: code: 1 signal: null 12 info lifecycle [email protected]~serve: Failed to exec serve script 13 verbose stack Error: [email protected] serve: `vue-cli-service serve` 13 verbose stack Exit status 1 13 verbose stack at EventEmitter.<anonymous> (/home/riyad/.nvm/versions/node/v11.10.1/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16) 13 verbose stack at EventEmitter.emit (events.js:197:13) 13 verbose stack at ChildProcess.<anonymous> (/home/riyad/.nvm/versions/node/v11.10.1/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14) 13 verbose stack at ChildProcess.emit (events.js:197:13) 13 verbose stack at maybeClose (internal/child_process.js:984:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5) 14 verbose pkgid [email protected] 15 verbose cwd /home/riyad/Desktop/todo_wedevs/todo 16 verbose Linux 5.6.19-2-MANJARO 17 verbose argv "/home/riyad/.nvm/versions/node/v11.10.1/bin/node" "/home/riyad/.nvm/versions/node/v11.10.1/bin/npm" "run" "serve" 18 verbose node v11.10.1 19 verbose npm v6.7.0 20 error code ELIFECYCLE 21 error errno 1 22 error [email protected] serve: `vue-cli-service serve` 22 error Exit status 1 23 error Failed at the [email protected] serve script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 1, true ]
also do suggest me how to setup a project safely with vuex and vue-router
Try to just install the pacakge to devDependencies:
npm i --save-dev vue-loader-v16
It helped me out.
With babble.config.js
do you then mean babel.config.js
, hehe? Anyhow, I think your babel.config.js
should just be like this:
module.exports = { presets: ["@vue/cli-plugin-babel/preset"], };
And for keeping your package.json more clean, you could make an .eslintrc.js
file instead - just copy/paste the data from your eslintConfig
key in package.json
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With