🔧

【NuxtContent】queryContent()がbuildだとnullになる原因はnitropackのバージョンだった

2024/03/07に公開

症状

dev環境ではQueryBuilderParamsもqueryContent()も正常に機能しているが，build環境ではpathに不具合があるからかqueryが空配列となり，フロント部分ではslot: not found系のエラーが表示される。
build環境でもContentDocは機能しているため，mdのファイル自体は読みこめている。
/api/_content/queryにアクセスするとどちらの場合でもJSONでqueryが返ってくる。

バージョン

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/content": "^2.7.0",
    "@nuxtjs/device": "^3.1.1",
    "@nuxtjs/tailwindcss": "^6.7.0",
    "@vueuse/components": "^10.4.1",
    "@vueuse/core": "^10.4.1",
    "@vueuse/nuxt": "^10.4.1",
    "axios": "^1.6.7",
    "nuxt": "^3.10.3",
    "tailwindcss": "^3.3.2",
    "vue": "^3.4.19",
    "vue-markdown-render": "^2.0.1",
    "vue-router": "^4.3.0"
  },
  "resolutions": {
    "nitropack": "2.8.1" //後述します，バグ修正前はありませんでした
}
}

解決方法

yarnを用いてresolutionsでnitropackのバージョンを2.8.1（最新は2.9.1）に指定して解決してもらう。

package.json

"resolutions": {
    "nitropack": "2.8.1"
}

以下解決方法の引用元

Hi,
Not sure if it helps but just leaving some feedback here.
I also came across this issue (or very similar, error 500 when querying content only on prod) and managed to fix it by adding the following in my package.json:
"resolutions": {
"nitropack": "2.8.1"
}
Using yarn v4 with nodeLinker: node-modules

原因（分からない）

分かりません！これを機に今までVue/Nuxtで物を作っていた時にブラックボックスで気にしなくても動かしてくれていたNitroやViteと言ったサーバーの部分も学んでいきたいと思います。

症状

バージョン

解決方法

原因（分からない）

Discussion