Version mismatch when installing vue-apollo in Vue 3.0 application - vue.js

I set up a new Vue 3.0 application using
vue create
Then I add apollo to my application using
vue add apollo
Then when I run npm run build I get the following error
ERROR Failed to compile with 2 errors
Module Error (from ./node_modules/vue-loader/lib/index.js):
Vue packages version mismatch:
- vue#3.0.0 (C:\workspace\StatusTool\dummy-project\node_modules\vue\index.js)
- vue-template-compiler#2.6.12 (C:\workspace\StatusTool\dummy-project\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.
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse (C:\workspace\StatusTool\dummy-project\node_modules\#vue\component-compiler-utils\dist\parse.js:15:23)
at Object.module.exports (C:\workspace\StatusTool\dummy-project\node_modules\vue-loader\lib\index.js:67:22)
What am I doing wrong?
Version Information:
#vue/cli: 4.5.6
vue-cli-plugin-apollo: "0.22.2"
apollo: 2.31.0
Seems like package vue-apollo is not installed

Do not use vue/cli: 4.5.6 instead you need to use Manual install
vue add apollo is only for vue-cli 3 projects.
It is simple to install.
npm install --save vue-apollo graphql apollo-boost
or
yarn add vue-apollo graphql apollo-boost
You still will be able to use apollo-boost

Related

vue ui error type server.installSubscriptionHandlers is not a function

When I use the vue ui command, I get the following error : TypeError: server.installSubscriptionHandlers is not a function
I use yarn and I don't intend to use npm.
PS C:\Users\Lenovo\Desktop\Learnvue\master> vue ui 🚀 Starting GUI... Persisted queries are enabled and are using an unbounded cache. Your server is vulnerable to denial of service attacks via memory exhaustion. Setcache: "bounded" or persistedQueries: false in your ApolloServer constructor, or see https://go.apollo.dev/s/cache-backends for other alternatives.
ERROR TypeError: server.installSubscriptionHandlers is not a function
TypeError: server.installSubscriptionHandlers is not a function
at module.exports (C:\Users\Lenovo\AppData\Local\Yarn\Data\global\node_modules#vue\cli-ui\graphql-server.js:165:10)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async ui (C:\Users\Lenovo\AppData\Local\Yarn\Data\global\node_modules#vue\cli\lib\ui.js:71:26)`
yarn version : 1.22.19
vue version : #vue/cli 5.0.7
I had the same issue. It has to do with the old CLI. Make sure you upgrade to the latest vue.
Warning regarding Previous Versions
The package name changed from vue-cli to #vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with npm uninstall vue-cli -g or yarn global remove vue-cli.
npm update -g #vue/cli
OR
yarn global upgrade --latest #vue/cli

Vue: not responding to commands

I installed vue using
npm install vue
But the terminal wasn't recognizing "vue" command (like vue --version), so I hitted:
npm install -g vue-cli#2.7.0
And now it says I have version 2.7.0 when I check the version, but it doens't respond neither shows any error when I try:
vue ui
It just doesn't run. Can anyone help?
That is no longer the name of the Vue CLI package. You will need to install from #vue/cli as detailed here: https://cli.vuejs.org/guide/installation.html

Quasar cannot find quasar extras namely material-icons, roboto font css and polyfills

Each time I run quasar dev this message appears.
The installation is pretty standard with pwa template.
These dependencies were not found:
quasar-extras/material-icons/material-icons.css in ./.quasar/client-entry.js
quasar-extras/roboto-font/roboto-font.css in ./.quasar/client-entry.js
quasar-framework/dist/quasar.ie.polyfills.js in ./.quasar/client-entry.js
To install them, you can run: npm install --save quasar-extras/material-icons/material-icons.css quasar-extras/roboto-font/roboto-font.css quasar-framework/dist/quasar.ie.polyfills.js
if you are using quasar-cli, firstly delete it due to quasar-cli doesn't include quasar-extras built-in. You can see this with running quasar info. after deleting quasar-cli please install
npm i -g #quasar/cli
then run
quasar dev
with this way error should be gone.
I think the quasar-cli should be tagged deprecated already. To solve this problem I simply remove the global installation, used the vite setup and currently I am running the quasar commands using npx quasar

VueJS and antdesign vue - Error: Cannot find module 'babel-plugin-import' from

I came across a problem installing vueJS with ant-design and after reboot of serve it gave below error:
Error: Cannot find module 'babel-plugin-import' from xxx
My steps were:
Install vueJS project via vue ui
Install dependencies for ant-design via vue ui
Rerun the server
It turns out the ant-design install does overwrite some babel-import-plugin values.
I could resolve it by install of babel-import-plugin again after I did the install of ant-design.

vue packages version mismatch vue#1.0.28-csp

I'm new to npm & vue and have followed instructions to install both.
When I run vue create, I get the follwing
Vue packages version mismatch:
- vue#1.0.28-csp (C:\Users....vue.common.js)
- vue-template-complier#2.6.10 (c:\Users.....package.json)
How do I fix this?
I've seen others with a similar problem but not with the -csp file
My Vue version is 3.11.0.
I've fixed the issue but I'm not sure how!
I uninstalled vue and then tried again:
npm install -g #vue/cli
vue init webpack vueapp01 - I didn't do this last time, so maybe this is the answer!
Now when I do vue create hello-world, it works!
Thanks for your help #Ohgodwhy
Your vue-cli version is 3.11.0, not your vue version. You have globally installed version of vue at 1.0.28-csp. What you should do is:
npm update -g vue
or
yarn global update vue
which should bring it in line with the template compiler.