@nuxt/content pages not found in production mode

Viewed 2837

Explication

Hello, I got a problem with nuxt/content on my project when i run npm run build && npm run start. You have to know, in development mode there is no problem.

When i run production mode, i can't access to my files used with nuxt/content, you can see the error which appear in my console.

Picture : Problem which appear in my console in production mode

EDIT

I find what is the problem, this error come from SPA (if i choose SSR, it's working). Someone have an idea to solve it ?

Step to reproduce the problem :

  1. Create a project : npx create-nuxt-app content-project && cd content-project You have my configuration below. Picture : Configuration of my project
  2. Go into the project then install nuxt/content : npm install @nuxt/content
  3. Go into nuxt.config.js and add to "modules: []" this : '@nuxt/content' then add "content: {}"
    Picture : Adding lines to nuxt.config.js
  4. Into tsconfig.json, add this lines at "types" : "@nuxt/content",
    Picture : Adding line to tsconfig.json
  5. At the root of the project, add a dir named "content", into this directory create a file named "test.md" and add this lines into the file :
---
title: Introduction
description: Apprenez comment utiliser @nuxt/content.
---

## Liens

<nuxt-link to="/articles">Nuxt Link vers le Blog</nuxt-link>

<a href="/articles">Lien Html vers le Blog</a>

[Lien Markdown vers le Blog](/fr/articles)

<a href="https://nuxtjs.org">Lien Html externe</a>

[Lien Markdown externe](https://nuxtjs.org)
  1. Into pages directory, create a new file named "testcontent.vue" and add this code into :
<template>
  <article>
    <h1>{{ page.title }}</h1>
    <nuxt-content :document="page" />
  </article>
</template>

<script>
export default {
  async asyncData({ $content }) {
    const page = await $content('test').fetch()

    return {
      page,
    }
  },
}
</script>
  1. Now, you can save and try this in dev mode npm run dev, try this link "http://localhost:3000/testcontent", this should work.
  2. Then try this in production mode npm run build && npm run start. I don't understand why that doesn't work.
2 Answers

The problem is solved. I was using a SPA with target "server". In nuxt.config.js you have to put this line : target: 'static', if your application is a SPA.

"This way, Nuxt Content will know that it has to embed the database and avoid calling the server middleware." from https://github.com/nuxt/content/issues/144

You can totally use an SPA or even a full universal app with a target: static. I'm not sure that you get the linked post in your answer right.

It's clearly saying that you can get target: static (hence, host it on Netlify or alike) and keep the universal mode (ssr: true (default)), as shown in the documentation. The only thing that needs to be done is to nuxt generate rather than nuxt build since you're aiming for a static build.

Also, this comment is 6+ months old, we're using Nuxt 2.15.2 as of today.

I'd still recommend going static + universal to get all the benefits of nuxt + it's content module.

Related