Getting 500 internal server error for Nuxt 3 and Pinia

Question

I installed Pinia in Nuxt 3 following the Pinia documentation. But while running the project I am getting this error.

The requested module 'vue-demi' does not provide an export named 'hasInjectionContext'

Here is my package.json

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@types/quill": "^2.0.10",
    "nuxt": "^3.4.1"
  },
  "dependencies": {
    "@mdi/font": "^7.2.96",
    "@pinia/nuxt": "^0.4.11",
    "@vueup/vue-quill": "^1.1.1",
    "firebase": "^9.20.0",
    "pinia": "^2.1.3",
    "quill-image-resize-module": "^3.0.0",
    "quill-image-resize-module-ts": "^3.0.3",
    "sass": "^1.62.0",
    "vuetify": "^3.1.4"
  },
  "overrides": {
    "vue": "latest"
  }
}

And nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config

export default defineNuxtConfig({
  css: [
    "vuetify/lib/styles/main.sass",
    "@mdi/font/css/materialdesignicons.min.css",
  ],
  build: {
    transpile: ["vuetify"],
  },
  modules: ["@pinia/nuxt"],
});

Not sure what the solution is.

Answer 1

I have the same problem. As Raphael Rlt said, it's a version problem.

First, remove pinia and pinia/nuxt

npm remove pinia
npm remove @pinia/nuxt

Then install old version. Sometimes maybe you have to use --force to ensure the installation successfully.

npm i pinia@2.0.36 --force
npm i @pinia/nuxt@0.4.10

Then pinia operate without problem!