[ERRO] - Ao instalar o no vuex

Segue o arquivo de package.json da aplicação até o momento:

{
  "name": "tarefas",
  "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.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.2.5",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^6.4.2",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "^3.3.1",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "typescript": "~4.5.5"
  }
}

E o arquivo vue.config.js:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

Ola

O erro que você está enfrentando indica que há um problema no arquivo vue.config.js. Parece que você está usando uma versão mais recente do Vue CLI, que agora usa um formato diferente para o arquivo de configuração.

Para corrigir isso, você pode ajustar o seu arquivo vue.config.js da seguinte maneira:

// vue.config.js
module.exports = {
  transpileDependencies: [
    'vue'
  ]
};

Na nova versão do Vue CLI, não é mais necessário usar defineConfig no arquivo vue.config.js. A configuração é feita diretamente no objeto exportado.

Além disso, observe que transpileDependencies agora espera uma lista de dependências que precisam ser transpiladas pelo Babel. No exemplo acima, a única dependência incluída é 'vue'. Isso é necessário porque o Vue 3 e suas dependências podem precisar ser transpilados para compatibilidade com navegadores mais antigos.

Após fazer essas alterações, tente executar o projeto novamente:

npm run serve

Isso deve resolver o problema que você está enfrentando.

Fiz a alteração sugerida, mas apareceu outro erro:

npm run serve

> tarefas@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
 ERROR  Error: 
               
Vue packages version mismatch:
               
- vue@3.3.7 (/home/oliveira/Documentos/vue/tarefas/node_modules/vue/index.js)
- vue-template-compiler@2.7.15 (/home/oliveira/Documentos/vue/tarefas/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.
               
Error: 

Vue packages version mismatch:

- vue@3.3.7 (/home/oliveira/Documentos/vue/tarefas/node_modules/vue/index.js)
- vue-template-compiler@2.7.15 (/home/oliveira/Documentos/vue/tarefas/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.

    at Object.<anonymous> (/home/oliveira/Documentos/vue/tarefas/node_modules/vue-template-compiler/index.js:10:9)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:119:18)
    at loadFromContext (/home/oliveira/Documentos/vue/tarefas/node_modules/@vue/cli-service/node_modules/vue-loader/lib/compiler.js:30:10)
    at loadTemplateCompiler (/home/oliveira/Documentos/vue/tarefas/node_modules/@vue/cli-service/node_modules/vue-loader/lib/compiler.js:37:12)
    at exports.resolveCompiler (/home/oliveira/Documentos/vue/tarefas/node_modules/@vue/cli-service/node_modules/vue-loader/lib/compiler.js:25:23)
    at VueLoaderPlugin.apply (/home/oliveira/Documentos/vue/tarefas/node_modules/@vue/cli-service/node_modules/vue-loader/lib/plugin-webpack4.js:91:22)
    at VueLoaderPlugin.apply (/home/oliveira/Documentos/vue/tarefas/node_modules/@vue/cli-service/node_modules/vue-loader/lib/plugin.js:13:16)
    at webpack (/home/oliveira/Documentos/vue/tarefas/node_modules/@vue/cli-service/node_modules/webpack/lib/webpack.js:47:13)
    at serve (/home/oliveira/Documentos/vue/tarefas/node_modules/@vue/cli-service/lib/commands/serve.js:135:22)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Mesmo atualizando a versdo vue-template-compiler, como sugerido no erro. Ainda continua com o mesmo erro. Segue abaixo o package.json e o error. package.json

{
  "name": "tarefas",
  "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.8.3",
    "vue": "^3.2.13",
    "vue-loader": "^17.3.1",
    "vue-router": "^4.2.5",
    "vue-template-compiler": "^2.7.15",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^6.4.2",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "^3.3.1",
    "@vue/compiler-sfc": "^3.3.9",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "typescript": "~4.5.5"
  }
}

erro:

npm run serve

> tarefas@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
 ERROR  Error: 
               
Vue packages version mismatch:
               
- vue@3.3.7 (/home/oliveira/Documentos/vue/tarefas/node_modules/vue/index.js)
- vue-template-compiler@2.7.15 (/home/oliveira/Documentos/vue/tarefas/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.
               
Error: 

Vue packages version mismatch:

- vue@3.3.7 (/home/oliveira/Documentos/vue/tarefas/node_modules/vue/index.js)
- vue-template-compiler@2.7.15 (/home/oliveira/Documentos/vue/tarefas/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.

    at Object.<anonymous> (/home/oliveira/Documentos/vue/tarefas/node_modules/vue-template-compiler/index.js:10:9)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:119:18)
    at loadFromContext (/home/oliveira/Documentos/vue/tarefas/node_modules/@vue/cli-service/node_modules/vue-loader/lib/compiler.js:30:10)
    at loadTemplateCompiler (/home/oliveira/Documentos/vue/tarefas/node_modules/@vue/cli-service/node_modules/vue-loader/lib/compiler.js:37:12)
    at exports.resolveCompiler (/home/oliveira/Documentos/vue/tarefas/node_modules/@vue/cli-service/node_modules/vue-loader/lib/compiler.js:25:23)
    at VueLoaderPlugin.apply (/home/oliveira/Documentos/vue/tarefas/node_modules/@vue/cli-service/node_modules/vue-loader/lib/plugin-webpack4.js:91:22)
    at VueLoaderPlugin.apply (/home/oliveira/Documentos/vue/tarefas/node_modules/@vue/cli-service/node_modules/vue-loader/lib/plugin.js:13:16)
    at webpack (/home/oliveira/Documentos/vue/tarefas/node_modules/@vue/cli-service/node_modules/webpack/lib/webpack.js:47:13)
    at serve (/home/oliveira/Documentos/vue/tarefas/node_modules/@vue/cli-service/lib/commands/serve.js:137:22)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Consegui resolver o problema, segue os passos:

Seguir a sugestão do estudante e antes do npm run serve dei um npm install e apresentou que o vuex tem alguns problemas de vulnerabilidade e ai dei um npm audit --force e por seguinte dei um npm run serve

E com uma ajuda de um amigo me explicou o entendimento de package.json e package-lock.json