Getting 500 internal server error for Nuxt 3 and Pinia

huangapple go评论50阅读模式
英文:

Getting 500 internal server error for Nuxt 3 and Pinia

问题

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.

英文:

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.

答案1

得分: 4

我遇到了相同的问题。
如Raphael Rlt所说,这是一个版本问题。

首先,移除pinia和pinia/nuxt

npm remove pinia
npm remove @pinia/nuxt

然后安装旧版本。
有时可能需要使用--force来确保安装成功。

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

然后pinia就可以正常操作了!

英文:

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!

答案2

得分: 0

如果您的情况允许,升级 Nuxt 到最新版本。
这是对我有用的方法。

我从 Nuxt v3.2.2 升级到了 v3.5.2(写作时的最新版本),问题得以解决。

npx nuxi upgrade

英文:

If your situation allows you to, upgrade Nuxt to the latest version.
That is what worked for me.

I went from Nuxt v3.2.2 from v3.5.2 (latest at the time of writing) and the issue was resolved.

npx nuxi upgrade

huangapple
  • 本文由 发表于 2023年5月20日 20:23:00
  • 转载请务必保留本文链接:https://go.coder-hub.com/76295214.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定