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 [email protected] doesn't export joinRelativeURL but [email protected] 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"
  }
},

[Aravinda93]

@richard-edwards @farnabaz @cameroncf @CharlieDigital @ABB65 @idesignzone @kevinhaeni

Guys, could you let me know if this issue was resolved? I am still seeing the problem and based on the provided approach I tried and did not work for me. I have added the comments above based on my observations.

Is there any workaround that I can use?

I have created a reproduction of the issue in CodeSandBox

[Aravinda93]

@farnabaz

Kindly request you reopen this issue and lot of people are still facing the issue even with the latest Nuxt, Vue and Nuxt-content versions. I have created a reproduction of the issue in CodeSandBox

Our production deployment is blocked due to this issue. Please provide some workaround.

Steps for reproduction:

1. Navigate to CodeSandBox and run the application locally with command npm run dev.

2. Try to access any tags at the top the document by clicking on it https://fx62n5-3000.csb.app/tags/event%20hash

3. We can see the list of tags present in matching documents.

4. Now try to create .output by running npm run generate and try to run the website through it by running npm install -g serve & serve .output/public

5. Now if we try to access then it wont work for the first time.