content not building

[Fabio Tielen]

Hello

I'm trying Velite first time, nice project!
But I'm having a difficulty with building the content.

I'm running

pnpm velite dev --debug --verbose      
[VELITE] using config 'velite.config.ts' in 15.42ms
[VELITE] created entry file in '.velite/index.js' 
[VELITE] created entry dts file in '.velite/index.d.ts' 
[VELITE] output entry file in '.velite' in 1.04ms
[VELITE] initialized in 19.54ms
[VELITE] resolving collections from 'content' 
[VELITE] resolve 0 files matching '/blog/**/*.md' in 3.59ms
[VELITE] resolved 0 posts 
[VELITE] wrote '.velite/posts.json' with 0 posts 
[VELITE] output 0 posts in 0.48ms
[VELITE] output 0 assets in 0.00ms
[VELITE] resolved 1 collections in 4.92ms
[VELITE] build finished in 24.95ms
[VELITE] watching for changes in 'content' 

But nothing is showing up and from the output I can see "output 0 posts" and I don't see why or what is the root cause.
My posts.json inside .velite folder is indeed empty as []
I don't get any errors anywhere.

It's a simple Nextjs setup, I have 2 .mdx files with correct markup.

This is my velite config:

import { defineConfig, defineCollection, s } from "velite";
import rehypeSlug from "rehype-slug";
import rehypePrettyCode from "rehype-pretty-code";
import rehypeAutolinkHeadings from "rehype-autolink-headings";

const computedFields = <T extends { slug: string }>(data: T) => ({
    ...data,
    slugAsParams: data.slug.split("/").slice(1).join("/"),
});

const posts = defineCollection({
    name: "Post",
    pattern: "/blog/**/*.md",
    schema: s.object({
        slug: s.path(),
        type: s.string().max(50).default("blog").optional(),
        title: s.string().max(100),
        description: s.string().max(2000).optional(),
        date: s.isodate(),
        published: s.boolean().default(true),
        body: s.mdx(),
    })
        .transform(computedFields),
});

export default defineConfig({
    root: "content",
    output: {
        data: ".velite",
        assets: "public/static",
        base: "/static/",
        name: "[name]-[hash:6].[ext]",
        clean: true,
    },
    collections: { posts },
    mdx: {
        rehypePlugins: [],
        remarkPlugins: [],
    }
});

This is my next.config.mjs:

// /** @type {import('next').NextConfig} */
// const nextConfig = {};

// export default nextConfig;

import { build } from "velite";

/** @type {import('next').NextConfig} */
export default {
  // othor next config here...
  webpack: (config) => {
    config.plugins.push(new VeliteWebpackPlugin());
    return config;
  },
};

class VeliteWebpackPlugin {
  static started = false;
  constructor(/** @type {import('velite').Options} */ options = {}) {
    this.options = options;
  }
  apply(/** @type {import('webpack').Compiler} */ compiler) {
    // executed three times in nextjs !!!
    // twice for the server (nodejs / edge runtime) and once for the client
    compiler.hooks.beforeCompile.tapPromise("VeliteWebpackPlugin", async () => {
      if (VeliteWebpackPlugin.started) return;
      VeliteWebpackPlugin.started = true;
      const dev = compiler.options.mode === "development";
      this.options.watch = this.options.watch ?? dev;
      this.options.clean = this.options.clean ?? !dev;
      await build(this.options); // start velite
    });
  }
}

The only thing I get is a warning when running pnpm run dev as following:

<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Parsing of /Users/xxxx/development/xxxxx-nextjs/xxxxx-nextjs/node_modules/.pnpm/velite@0.1.0-beta.11/node_modules/velite/dist/velite-B1HL3saI.js for build dependencies failed at 'import(configUrl.href)'.
<w> Build dependencies behind this expression are ignored and might cause incorrect cache invalidation.

My versions:

  "dependencies": {
     ...
    "next": "14.1.3",
    "react": "^18",
    "rehype-autolink-headings": "^7.1.0",
    "rehype-highlight": "^7.0.0",
    "rehype-pretty-code": "^0.13.0",
    "rehype-slug": "^6.0.0",
    "shiki": "^1.1.7",
    "zod": "^3.22.4"
}

  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.3",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5",
    "velite": "0.1.0-beta.11"
  }

Any clue where I need to start checking or what this is causing?

Thanks!

[Lei]

'/blog/**/*.md' -> 'blog/**/*.md'

[Fabio Tielen]

'/blog//*.md' -> 'blog//*.md'

Doesn't work either. Still zero ouput.

And I also tried other combinations like

"/blog/**/*.md" and "/blog/*/*.md" and "*/blog/**/*.md" and "/blog/*.md"

I keep getting zero output. But at the same time, no errors either. Its like it doesn't see any of the files.

This is the content from test.mdx:

---
title: Test
description: test description
type: post
date: 2024-03-07
published: true
---

# Test bericht

Welkom test

There is no weird content whatsoever.

[Lei]

There is a problem with what I pasted.

this is a glob pattern

[Lei]

'/blog/**/*.md' -> 'blog/**/*.md'

1

[Fabio Tielen]

'/blog/**/*.md' -> 'blog/**/*.md'

1

I have it exactly like that, still same no output:

[Lei]

Your directory only contains mdx files, the search here is for md

[Lei]

blog/**/*.md means to search for all MD files in the blog directory

[Lei]

ping @codeagencybe

[Fabio Tielen]

@zce

Sorry for delay, I changed to other work meanwhile but I just tried again and now it's working.
Not sure why, because i'm following a tutorial and it uses that exact same pattern and the files are *.mdx and they work just fine.

I have changed it to /*/mdx pattern because my files are also .mdx extension and that did work fine.

So thanks for helping out!