Why is there an error when installing vuex? - vue.js

Tell me, I understand that there is a problem in the versions, but how to solve it?
I have tried:
npm cache clean --force commands
npm install -g npm-install-peers
npm install --legacy-peer-deps
Install with npm install --save-dev vuex#next gives me this error
My package.json file:
"name": "",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"serve:standalone": "vue-cli-service serve --mode standalone"
},
"dependencies": {
"core-js": "^3.6.5",
"devextreme": "21.2.5",
"devextreme-vue": "21.2.5",
"single-spa-vue": "^2.1.0",
"vue": "^2.6.11"
},
"devDependencies": {
"#storybook/vue": "^6.4.14",
"#vue/cli": "^4.5.15",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"node-sass": "^6.0.1",
"sass-loader": "^10",
"eslint-plugin-vue": "^6.2.2",
"vue-cli-plugin-single-spa": "~3.1.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]

That is because you're trying to install Vuex#4, which is only compatible with Vue#3. However, your project is using Vue#2 instead.
You will need to decide which Vue version you want to use. Since you mentioned that you only want to use Vue2, you need to install the Vuex#3 instead:
npm install vuex#3

Related

Is it possible to have TailwindCSS with VueJS3 without Vite? Error with PostCSS 8

I have almost the same problem as this question :
PostCSS 8 Error When Installing Tailwind CSS in Vue 3 (v3.2.10) without Vite (PostCSS 8 is supported)
I followed Flydev's answer and performed the same procedure :
vue create new-project
cd new-project
npm install -D #vue/compiler-sfc tailwindcss#latest postcss#latest autoprefixer#latest
npm run serve
Node and Vue/cli versions are perfect. I made the changes in my package.json folder, delete package-lock.json and then run npm install
My package.json :
{
"name": "new-project",
"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",
"vue": "^3.2.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.13",
"#vue/compiler-sfc": "^3.2.21",
"autoprefixer": "^10.4.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"postcss": "^8.3.11",
"tailwindcss": "^2.2.19"
},
"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"
]
}
npm run serve works ! Great ! But not Tailwind :(
So I looked at the documentation on the TailwindCSS site https://tailwindcss.com/docs/guides/vue-3-vite and I think I'm missing some manipulations to do
So I did "npx tailwindcss init -p" to create the tailwind.config.js and postcss.config.js files, but after this manipulation, the npm run serve gave me the same error as before.
I really don't understand ... It tells me to need PostCSS8 even though I have version8.3.11
I did some tests, I tried to create the tailwind.config.js and postcss.config.js files myself, no problem with tailwind.config.js, but from the moment I create the postcss.config.js file and start npm run serve the error message comes back.
I wonder if we can do a VueJS project with Tailwind without Vite now...
Thank you for your help ! :)

vuejs3 module parse failed on server start

When I enter yarn serve on my Webstom IDE I get:
warning in ./src/style/style.css.map
Module parse failed: Unexpected token (1:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I can run This app normally on my local server, but i get rejected when uploading it to Heroku.
I have been using Vue CLI with Vuejs3 version.
in my project tree i don't have webpack.config.js or vue.config.js I only have babel. config.js...
this is my package.json file:
{
"name": "ropes-front",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#babel/polyfill": "^7.12.1",
"#fortawesome/fontawesome-svg-core": "^1.2.34",
"#fortawesome/free-solid-svg-icons": "^5.15.2",
"#fortawesome/vue-fontawesome": "^3.0.0-3",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"express": "^4.17.1",
"jenesius-vue-modal": "^1.3.1",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"serve-static": "^1.14.1",
"vue-axios": "^3.2.2",
"vue-router": "^4.0.3",
"vuex": "^4.0.0-rc.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"sass": "^1.43.4",
"sass-loader": "^10.1.1"
},
"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"
]
}

Vue quaser production build "A web page is slowing down your browser"

I'm building a web application with Vue and Quaser. My development environment works fine and everything loads as it should. I serve the development like any other:
npm run serve
However, on a build, the application takes a lot of resources and freezes the browser. I get the message "A web page is slowing down your browser" on firefox while chrome based browsers simply take a lot of time.
npm run build
serve -s dist
I used serve -s dist to test wh netlify was not loading locally. I cannot seem to get why this happens. My package.json looks is as below:
{
"name": "friendly-chainsaw-sass-kit",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#quasar/extras": "^1.0.0",
"apexcharts": "^3.26.0",
"core-js": "^3.6.5",
"quasar": "^1.0.0",
"vue": "^2.6.11",
"vue-apexcharts": "^1.6.0",
"vue-css-donut-chart": "^1.3.0",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-unit-jest": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/composition-api": "^1.0.0-rc.5",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/test-utils": "^1.0.3",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^1.19.1",
"vue-cli-plugin-quasar": "~3.0.1",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"#vue/prettier"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"jest": {
"preset": "#vue/cli-plugin-unit-jest"
}
}
Is there something I might be doing wrong?
As #larizzatg alluded, the error from such a message came from a race condition, just that there was no clear concise error message or direction I could get to from the pop-up. In one of my components, I had a for loop, wherein I was slicing.
<div v-for="task in allTasks.splice(0,3)" :key="task.name">
The above would have looped through the array of tasks, just not all of them, 3 items to be exact. It works fine in development. However, to get around the error.
<div v-for="task in topTasks" :key="task.name">
Where topTasks comes from a computed property. This should have just failed during the development phase other than giving hope it works. I have done the same implementation with Angular-based applications just fine. I hadn't thought it would be an issue with Vue. Makes you go through your previous code implementations to wonder.

Custom NPM Package installing issue

I made a custom npm package which I'm trying to install in my Vue application. I tried to follow some tutorials and steps but I'm getting an error below:
This dependency was not found:
chatinterfaceui in ./src/main.js
To install it, you can run: npm install --save chatinterfaceui
My main.js file in my chatinterfaceui lib is:
import ChatUi from './ChatUi.vue'
export default {
install (Vue, options) {
if (!options || !options.store) {
throw new Error('Please initialise plugin.');
}
Vue.component('chat-ui', ChatUi);
}
}
The package.json file for the chatinterfaceui lib:
{
"name": "chatinterfaceui",
"version": "0.1.0",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-bundle": "vue-cli-service build --target lib --name chatinterfaceui ./src/ChatUi.vue",
"lint": "vue-cli-service lint"
},
"main": "./dist/chatinterfaceui.common.js",
"dependencies": {
"autolinker": "^3.14.1",
"core-js": "^3.6.4",
"emoji-js": "^3.5.0",
"escape-goat": "^3.0.0",
"msgdown": "^1.0.2",
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"vue/no-unused-vars": "off"
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
My main.js file for the Vue application is:
import Vue from 'vue'
import App from './App.vue'
import ChatUi from 'chatinterfaceui'
Vue.use(ChatUi)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
My package.js is:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"chatinterfaceui": "^0.1.0",
"core-js": "^3.6.4",
"dialogflow": "^1.2.0",
"uuid": "^8.0.0",
"vue": "^2.6.11",
"vue-beautiful-chat": "^2.3.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.14.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
In my main Vue application in which I want to use my library, when I try to use the library, I'm getting the warning. I feel I'm doing something silly, but can't understand or find what.

Vue CLI 3 app not loading in IE with some npm packages

I have created a Vue app with vue-cli 3. It was working fine in all browsers until I installed a npm package "microsoft-cognitiveservices-speech-sdk". To my knowledge, I guess, this particular package is not getting transpiled by babel. Below is my babel.config.js and package.json
//babel.config.js
module.exports = {
presets: [
'#vue/app'
]
}
//package.json
{
"name": "vueApp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.0",
"core-js": "^2.6.5",
"microsoft-cognitiveservices-speech-sdk": "^1.7.0",
"vue": "^2.6.10",
"vue-good-table": "^2.18.0",
"vue-i18n": "^8.14.0",
"vue-router": "^3.1.2",
"vue-uuid": "^1.1.1",
"vuex": "^3.1.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.10.0",
"#vue/cli-plugin-eslint": "^3.10.0",
"#vue/cli-service": "^3.10.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"http-proxy-middleware": "^0.20.0",
"less": "^3.10.2",
"less-loader": "^5.0.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
Once I installed the package, my application is not loading in IE (version 11) browser. But works like a charm in Google Chrome.
Can anyone help me out to solve this problem? Thanks in advance!
After a huge research and tried out the suggestions in the web, I have fixed the issue. So apparently, you need to create a configuration file for the app to transpile your troubling packages.
Create a vue.config.js in your root directory and add a property transplieDependencies, an array to contain your troubled libraries for es5 conversion.
//vue.config.js
module.exports = {
transplieDependencies: [
"your trouble library name"
]
}
Once you implemented the above changes, restart your server to get it working in IE.