29

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

Improve this question
3

9 Answers 9

Reset to default
50

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

23

Update npm to version higher than 6.9 and do a npm i, this should install the missing packages https://github.com/vuejs/vue-cli/pull/5718

npm install npm@latest -g(To update npm)

Improve this answer

2 Comments

Worked, but I had to delete node_modules before npm i.
i aslo had to do npm i
5

I solved it reinstalling the package. First you need to uninstall it

npm uninstall vue-loader-v16

Once uninstall completes, install it again

npm i vue-loader-v16

It seems obvious but it worked twice for me

Improve this answer

2 Comments

it helps me a lot
faced same issue again, and found the same solution it works as expected.
1

You need to delete node-modules folder from your project. Then you install npm again by using command

npm i -g npm

Then you need to serve your application as

npm run serve

This might be helpful to you.

Improve this answer

Comments

1

I had the same issue using laravel 9.x , laravel/ui , and use vue as scaffolding. my issue solves as I upgrade the vue-loader to v15.9.8

npm i [email protected] -D

edit : here's my npm version

npm: '8.1.2',
node: '16.13.1',
v8: '9.4.146.24-node.14'

Improve this answer

Comments

0

For others, in case the other answers didn't work, I found my npm version was in need of an update.

Improve this answer

Comments

0

This happens when you are using a lower version ( < 6.9) npm, so, are you using a lower nodejs ?

  1. check your node version ( means your npm version)

node -v

  1. install a newer node version

nvm install 14.x.x

  1. nvm use 14.x.x

npm -v => 6.14.x

Improve this answer

Comments

-1

Actually downgrading the vue/cli from 4.5.6 to 3.0.1 worked..it downgraded the vue cli from 3 to 2...actually vue cli 3 is beta version....shouldn't use 3 right now...the comnand i used to downgrade You simply need the specific version you want to install..in my case ->

npm install -g @vue/[email protected]

Improve this answer

Comments

-1

Edit App.js >> Go to file path : src/component/App.vue

import this code

// code returned from the main loader for 'source.vue' // import the <template> block import render from 'source.vue?vue&type=template' // import the <script> block import script from 'source.vue?vue&type=script' export * from 'source.vue?vue&type=script' // import <style> blocks import 'source.vue?vue&type=style&index=1' script.render = render export default script

and after run

npm run serve

i hope solve this error "Cannot find module 'vue-loader-v16/package.json'"

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.