Skip to content
Advertisement

“Invalid URL” error for markdown file using Nuxt content module

I’m working on a Nuxt site using the built in content module, and running locally, everything works fine. However, when I attempt to build the site by running nuxt generate, I get a fatal error on the first markdown file that says Invalid URL. My markdown files are in the /content/posts directory, and the name of this one is structured my-post-markdown-file and named my-post-markdown-file.md. I’ve removed the problem file from the directory to see if it was just that particular file, but the process errors out on the next file, too. I’m following this post by Debbie O’Brien for using the content module, so it looks as if I have things created properly. Is there something else I’m missing?

UPDATE: I narrowed it down to sitemap generation. Following this post, I have the following plugin defined for generating my routes:

export default async () => {
  const { $content } = require("@nuxt/content");
  const files = await $content({ deep: true }).only(["path"]).fetch();

  return files.map((file) => (file.path === "/index" ? "/" : file.path));
};

and then in my nuxt.config.js, I have the sitemap defined as

sitemap: {
    path: '/sitemap.xml',
    hostname: process.env.BASE_URL,
    gzip: true,
    routes() {
      return getRoutes();
    }
  }

My content directory structure is

content
   |  
   |   posts
   |      
   |       my-post-markdown-file1.md
   |       my-post-markdown-file2.md
   |       my-post-markdown-file3.md  
  about.md

And when I run npm generate it ends on this error

 TypeError [ERR_INVALID_URL]: Invalid URL: about

Advertisement

Answer

Using this configuration in nuxt.config.js, I was able to generate the sitemap for my Nuxt site using the content module:

sitemap: {
    hostname: 'https://my-website-url.com',
    gzip: true,
    routes: async () => {
      let routes = []
      const { $content } = require('@nuxt/content')
      let posts = await $content('posts').fetch()
      for (const post of posts) {
        routes.push(`blog/${post.slug}`)
      }
      return routes
    },
  },

I tested this both with a local build as well as deploying to Netlify.

One configuration I see that could be different is that the route you are returning may not be a valid endpoint. The return for the routes should be an array of valid relative URLs. Are you hosting your blog posts as “https://url.com/{post}”?

The above code is based on the Nuxt Content integrations page.

Advertisement