queryContent doesn't work after nuxt build

[kevinhaeni]

Environment

"@nuxt/content": "^2.12.0", "nuxt": "^3.10.2", "vue": "^3.4.19",

Reproduction

• content/
• -- doc_1.json
• -- doc_2.json
• app.vue
• nuxt.config.ts
• pages/
• -- [...slug].vue

slug.vue:

const slug = route.params.slug[0];
const { data, pending, error, refresh } = await useAsyncData(slug, () => queryContent(slug).findOne());

nuxt.config.ts:

import path from "node:path";

export default defineNuxtConfig({
  ssr: true,
  modules: [
    '@nuxt/content'
  ],
  content: {
    content: {
      driver: 'fs',
      base: path.resolve(__dirname, 'content')
    },
  },
  routeRules: {
    "/**": {
      prerender: false,
    },
  },
});

Describe the bug

When running nuxt dev, everything works fine: calling localhost:3000/doc_1 shows the content of doc_1.json:

However, when running nuxt build and node .output/server/index.mjs and doing the same request, I'm getting:

[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading '_path')
  at ./.output/server/chunks/nitro/node-server.mjs:8163:52  
  at Array.find (<anonymous>)  
  at fetchDirConfig (./.output/server/chunks/nitro/node-server.mjs:8163:32)  
  at ./.output/server/chunks/nitro/node-server.mjs:8197:63  
  at Array.reduce (<anonymous>)  
  at ./.output/server/chunks/nitro/node-server.mjs:8197:39  
  at async Object.handler (./.output/server/chunks/nitro/node-server.mjs:8528:21)  
  at async Object.handler (./.output/server/chunks/nitro/node-server.mjs:2967:19)  
  at async toNodeHandle (./.output/server/chunks/nitro/node-server.mjs:3233:7)  
  at async ufetch (./.output/server/chunks/nitro/node-server.mjs:3599:17)

I would expect that queryContent fetches the files from /content directory. I could swear that some days ago it did fetch data from some nuxt-content cache file (which would also not be good as my data in /content is dynamic.

Additional context

What confuses me is that under .output/server/chunks/raw/ I see a doc_1.mjs and a doc_2.mjs and the error seems to result from loading these files.

Logs

No response

[farnabaz]

Do you mind creating a simple reproduction using the starter? https://nuxt.new/c/content

[kevinhaeni]

I tried but even when I run build in the unmodified starter, I'm getting a: [8:35:59 PM] ERROR Nuxt Build Error: "joinRelativeURL" is not exported by "node_modules/ufo/dist/index.mjs", imported by "virtual:nuxt:/workspace/.nuxt/paths.mjs".

[Ahmard]

Try upgrading your Nuxt version, it'll work, nuxi upgrade --force

[some-user123]

Try pnpm up ufo (or corresponding command in your package manager).

[kevinhaeni]

thanks! Here you go: Sample

When using nuxt dev and opening :3000/doc_1 it works, when doing the same after nuxt build and node .output/server/index.mjs, I'm still getting the error [nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading '_path')

[juane1000]

Can confirm that a nuxi upgrade did the trick. Experienced the issue for the first time today. I was on the current version however. Not sure what went wrong.

[santiagoaloi]

I would assume its related to a an issue I reported some time ago #2580 Upgrading nuxt to the latest version will also upgrade nitro pack the bug I was hitting was related to Nitro Version: 2.9.1 If this case is resolved, I suggest closing it 🙂

[kevinhaeni]

I did a npx nuxi upgrade and it's now using: Nuxt 3.11.2 with Nitro 2.9.6
However, the error still persists for me

[idesignzone]

I have this problem too. Following

const { data } = await useAsyncData(slug, () => queryContent(slug).findOne());

works in Dev but not in Prod. Seems like it takes a moment for content to load and gets ignored in process. After a page reload content appears!

"nuxt": "^3.11.2",
"@nuxt/content": "^2.12.1",

[ABB65]

Unfortunately I have the same error. While the code below works in dev mode on my blog pages that I prerender with route rules and on the pages I created for some static documents, it does not work after build.

const { data: documents } = await useAsyncData('contracts-kvkk-data', () =>
  queryContent<any>('/sozlesmeler-ve-kvkk').find())

This code gives me an empty array after build.

Route rules are as follows.

    'sozlesmeler-ve-kvkk/**': {
      prerender: true,
    },

[EroTiXx]

Same problem, everything works in Dev, but nothing works in Prod, the query returns an empty array

const { data: posts } = await useAsyncData(path, () => queryContent(path).sort({ date: -1 }).find())

"nuxt": "^3.11.2", "@nuxt/content": "^2.12.0"

The nuxi upgrade --force command does nothing

Provider: CloudFront

[cameroncf]

I tried but even when I run build in the unmodified starter, I'm getting a: [8:35:59 PM] ERROR Nuxt Build Error: "joinRelativeURL" is not exported by "node_modules/ufo/dist/index.mjs", imported by "virtual:nuxt:/workspace/.nuxt/paths.mjs".

@kevinhaeni I'm getting this same error and did a little digging in the lockfile to try and find it's origin. Looks like ufo@1.4.0 doesn't export joinRelativeURL but ufo@1.5.3 does. Both are in my lockfile, and they seem to track back to a specific version of Rollup and/or Nuxt, but then my head exploded trying to get further.

Did you ever find a resolution to this?

Edit: Adding a solution that just worked for me.

1. Added the below override to package.json
2. Deleted node_modules
3. Ran pnpm i

"overrides": {
  "nuxt": {
    "ufo": "1.5.3"
  }
},

[richard-edwards]

@cameroncf I tried every iteration of your package.json edit and still the same issue for me. I'm using pnpm as well but I am using Turbo repo so I wonder if that has anything to do with it.

[CharlieDigital]

@cameroncf 's solution worked for me. If you are using Yarn, you'll need to use resolutions instead of overrides:

  "resolutions": {
    "ufo": "1.5.3"
  }

(Add at same level as dependencies)

[farnabaz]

Everything should be good with latest module and Nuxt version

[Aravinda93]

@farnabaz @cameroncf @CharlieDigital

You mentioned that with the latest Nuxt version, this should be fixed but for some reason even with the latest Nuxt version "nuxt": "^3.13.1", and Nuxt content "@nuxt/content": "^2.13.2", I am seeing this issue.

Everything works fine when I run in dev mode, though docker or running locally via .output using node .output/server/index.mjs --port=8080 --hostname=0.0.0.0 but when deployed it is not working.

<script setup>
const tag = route?.params?.tags;
const { data: docs } = await useAsyncData("docs", () => queryContent().find());

const filteredDocs = computed(() => {
  if (!docs.value) return [];
  const matchingDocs = docs.value.filter((doc) =>
    doc.navigation?.tags?.includes(tag)
  );
  return matchingDocs;
});
</script>

Here docs value I am getting empty due to which unable to use the filter for first time but when I reload the page it works fine. I also tried the

"overrides": {
  "nuxt": {
    "ufo": "1.5.3"
  }
},

This did not work for me as well in package.json.

[Aravinda93]

@richard-edwards

I also used the turbo and added the recommendations in overrides as provided by @cameroncf but still see the issue and queryContent does not work for first time but if I load the page again then works for the 2nd time. This happens in production but is unable recreated locally.

Did you find a fix or work-around for this issue? I am using latest Nuxt and Nuxt content: "turbo": "^2.0.9" "nuxt": "^3.13.1", "@nuxt/content": "^2.13.2",.

I tried this but did not work for me:

"overrides": {
  "nuxt": {
    "ufo": "1.5.3"
  }
},