Error: Cannot find module 'vue-loader-v16/package.json'

34,859

Solution 1

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

Solution 2

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)

Solution 3

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

Share:
34,859
Riyad Zaigirdar
Author by

Riyad Zaigirdar

Updated on December 25, 2021

Comments

  • Riyad Zaigirdar
    Riyad Zaigirdar over 2 years

    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