content: 404 Not Found

Environment

"@nuxt/content": "^2.2.0",
"@nuxt/kit": "3.0.0-rc.11",
"nuxt": "^3.0.0",

Reproduction


export default defineNuxtConfig({
  typescript: {
    shim: false
  },
  ssr: false,
  app: {
    head: {}
  },
  css: ['@/assets/css/animate.scss', '@unocss/reset/tailwind.css', '@/assets/css/neko.scss', '@/assets/css/index.scss'],
  modules: ['@nuxt/content', '@unocss/nuxt', '@pinia/nuxt'],
  buildDir: 'nuxt-build',
  content: {
    watch: {
      ws: {
        hostname: 'localhost'
      }
    },
    markdown: {
      tags: { h1: 'h1', h2: 'proseH2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', code: 'proseCode', codeInline: 'proseCodeInline' }
    },
    highlight: {}
  }
})

Describe the bug

  1. npm run generate

2 .Request URL: https://buck-1238374.cos-website.ap-chongqing.myqcloud.com/api/_content/query/u7BbTyuhiE.1672998422551.json?_params={"sort":[{"_file":1,"$numeric":true}]} Request Method: GET Status Code: 404 Not Found

image

Additional context

No response

Logs

No response

About this issue

  • Original URL
  • State: open
  • Created a year ago
  • Reactions: 1
  • Comments: 21 (2 by maintainers)

Most upvoted comments

For exemple, If you go on https://mrleblanc101.github.io/blog/2023-01-17-momentjs-avec-vitejs directly, the page crash. If you go to https://mrleblanc101.github.io/blog/ and click on the first article Utiliser moment.js locales dans un projet utilisant Vite.js, it work !

I don’t understand why nuxt-content does an API call since I have no dynamic feature like a Search function. Why would it need to call an API if the page is statically generated ?

When I navigate from the blog page to a post, the query is: https://mrleblanc101.github.io/api/_content/query/L8Uhgu87AO.1674081216101.json?_params={"surround":{"query":"/blog/2023-01-17-momentjs-avec-vitejs"},"where":[{"_path":"--REGEX+/^\\/blog/"}],"sort":[{"_file":1,"$numeric":true}]}

When I hard reload the page, the query is: https://mrleblanc101.github.io/api/_content/query/cFd5i6K2Vh.1674081216101.json?_params={"surround":{"query":"/blog/2023-01-17-momentjs-avec-vitejs/"},"where":[{"_path":"--REGEX+/^\\/blog/"}],"sort":[{"_file":1,"$numeric":true}]}

The JSON file name don’t match for some reason.

i have same issue… how to fix? 😦

What should you do if you have multiple route rules?

routeRules: {
        '/**': { prerender: true },
        '/blog/**': { ssr: true },
        '/blogs/**': { ssr: true },
        '/dashboard/**': { ssr: false },
        '/account/**': { ssr: false },
    },
    content: {
        experimental: {
          clientDb: true
        },
        markdown: {
          toc: { depth: 3, searchDepth: 3 }
        }
    },
    nitro: {
        prerender: {
          routes: ['/sitemap.xml']
        }
      },

This doesn’t work for me with either yarn build or yarn generate.

If you got a Content not found. with Nuxt Content, try to explicitly add ssr: true to your config

export default defineNuxtConfig({
  ssr: true,
  ...
})

Thank you very much!

It worked now! Indeed it needed ssr true. It also needed useAsyncData use for the query request. At that point i made it work locally in generate mode but i saw that through Netlify hosting it still wasn’t working. Looking further into the Nuxt docs i saw that in Nuxt 3 Nitro defines to the hosting providers what to run so in the hosting provider (Netlify in my case) the running command should be now npm run build instead of npm run generate that it was in the past.

(Wrote more details in case it helps anyone in the future since it’s a combination of solutions mentioned in this issue and hosting configuration with Nuxt 3)

If you got a Content not found. with Nuxt Content, try to explicitly add ssr: true to your config

export default defineNuxtConfig({
  ssr: true,
  ...
})

Content module does not support SSR false by default because it highly depends on Nuxt pre-renderer to generate static pages. However, there is an experimental flag that you can use to enable client-side querying.

export default defineNuxtConfig({
  content: {
    experimental: {
      clientDb: true
    }
  }
})

Note that this is an experimental feature and may or may not have some minor breaking changes in the future.

Having similar issues using ssg with ssr false (using Netlify for hosting). I tried setting this flag but it looks like the 404 errors keep happening for me when using queryContent. Has something changed with how one configures this clientDb experimental flag? (In dev mode and npm run build everything works.)

@nlxdodge Actually, you don’t need to do this at all. I had the same issue. Since your app is pre-rendered, there shouldn’t even be any API call. You probably just forgot the wrap your query content in an useAsyncData like I did.

I believe this is the same issue I am facing. I wrote a hacky workaround i.e. to have an extra page to load the API nodes by calling queryContent.

So when you run generate, Nitro walks through all the /pages in Nuxt, which loads any queryContent inside those pages. That function additionally runs addPrerenderPath function IF it’s running inside the generate script so that the generated payload (dist) will contain the queries too.

I wish there was better solution, which is why I started that discussion. I would love if I could put these inside prerender hook somehow but unfortunately I couldn’t find a solution for this yet.