NPM dependency not found in vue project

Question

My vue project was running smoothly.

I made made a file name change to one of my components and got and error. I fixed the code and restarted the npm server with npn run serve.

Thats when I got the errors:

This dependency was not found:

* vue in ./src/main.js
* router in ./src/vue-router

I managed to get the router working again by running

npm npm i -D @vue/vue-router

I can't get vue working again. I've tried

 npm install --save vue

but is doesn't work. I'm guessing it's a reference error in my webpack config or something like that but I have no idea how to go about fixing it.

The code in my main.js looks like this:

import { createApp } from "vue";
import App from "./App.vue";
import router from "vue-router";

Which is standard I think and was working fine.

Help would be most appreciate as all my dev has stopped because of this.

UPDATE

After some fiddling and reinstalling I've got to this stage

Hi, I've added compiler-sfc, currently, my package.json looks like this: see below

I also delete my node_modules folder and install them all again using

npm install

However, I'm still getting this error:

Vue packages version mismatch:

- vue@3.0.11 (/Users/delon/Documents/webdev/Vue/amplify_vue3/node_modules/vue/index.js)
- vue-template-compiler@2.6.12 (/Users/delon/Documents/webdev/Vue/amplify_vue3/node_modules/vue-template-compiler/package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

{
  "name": "amplify_vue3",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@aws-amplify/ui-components": "^1.2.0",
    "@vuelidate/core": "*",
    "@vuelidate/validators": "*",
    "aws-amplify": "^3.3.27",
    "core-js": "^3.12.1",
    "vue": "^3.0.11",
    "vue-loader": "^16.2.0",
    "vue-router": "^4.0.0-0",
    "vuelidate": "^0.7.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "^3.0.5",
    "@vue/compiler-sfc": "^3.0.11",
    "css-loader": "^5.2.6",
    "file-loader": "^1.1.11",
    "mini-css-extract-plugin": "^0.4.5"
  }
}

I can't seem to find the reference that causing the problems.

NPM dependency not found in vue project

0 Answers