[Next.JS] SyntaxError: Unexpected end of JSON input

[abhigyantrips]

heya, i'm trying to use content-collections to load some metadata for my site. but every time i run npm run dev, i get the following error as output.

PS F:\project> npm run dev

> project@0.1.0 dev
> next dev

Starting content-collections content-collections.ts
undefined:1

SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at createCacheManager (file:///F:/project/node_modules/@content-collections/core/dist/index.js:725:20)
    at async createBuilder (file:///F:/project/node_modules/@content-collections/core/dist/index.js:813:24)
    at async file:///F:/project/node_modules/@content-collections/next/dist/index.js:12:23
    at async normalizeConfig (F:\project\node_modules\next\dist\server\config-shared.js:160:12)
    at async loadConfig (F:\project\node_modules\next\dist\server\config.js:714:28)
    at async Module.nextDev (F:\project\node_modules\next\dist\cli\next-dev.js:175:14)

Node.js v21.1.0

here's my next.config.mjs

import { withContentCollections } from '@content-collections/next';

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

export default withContentCollections(nextConfig);

here's my content-collections.ts, as per documentation

import { defineCollection, defineConfig } from '@content-collections/core';
import { compileMarkdown } from '@content-collections/markdown';

const memes = defineCollection({
  name: 'memes',
  directory: 'memes',
  include: '**/*.md',
  schema: (z) => ({
    title: z.string(),
    summary: z.string(),
  }),
  transform: async (document, context) => {
    const html = await compileMarkdown(context, document);
    return {
      ...document,
      html,
    };
  },
});

export default defineConfig({
  collections: [memes],
});

and here are my dependencies:

"dependencies": {
  "@radix-ui/react-aspect-ratio": "^1.1.0",
  "@radix-ui/react-icons": "^1.3.0",
  "@radix-ui/react-slot": "^1.0.2",
  "class-variance-authority": "^0.7.0",
  "clsx": "^2.1.1",
  "embla-carousel": "^8.1.5",
  "embla-carousel-autoplay": "^8.1.5",
  "embla-carousel-react": "^8.1.5",
  "lucide-react": "^0.383.0",
  "next": "14.2.3",
  "next-themes": "^0.3.0",
  "react": "^18",
  "react-dom": "^18",
  "sonner": "^1.4.41",
  "tailwind-merge": "^2.3.0",
  "tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
  "@content-collections/core": "^0.6.0",
  "@content-collections/markdown": "^0.1.0",
  "@content-collections/next": "^0.2.0",
  "@trivago/prettier-plugin-sort-imports": "^4.3.0",
  "@types/node": "^20",
  "@types/react": "^18",
  "@types/react-dom": "^18",
  "postcss": "^8",
  "prettier": "^3.3.0",
  "prettier-plugin-tailwindcss": "^0.6.1",
  "tailwindcss": "^3.4.1",
  "typescript": "^5"
}

from what i understand Unexpected end of JSON input errors are usually related to having blank values somewhere, but I'm pretty sure I've included all values. this is what my "memes" folder looks like:

and this is the content in each of them:

---
title: Test Title
summary: Test Summary
---

Placeholder.

[sdorra]

It looks like that something is broken in the cache directory. Can you try to remove the .content-collections directory and try again?

[abhigyantrips]

that works! looks like after i added the transform method (with compileMarkdown from @content-collections/markdown), the cache directory wasn't regenerated.

is there an option to regenerate .content-collections on every dev run?

[sdorra]

is there an option to regenerate .content-collections on every dev run?

That should not be necessary. Content Collections adds a hash of the configuration's content to each cache key. As a result, if the configuration changes, the cache keys no longer match.

It looks like in your case, the .content-collections/cache/mapping.json file was not fully written, leading to a parsing error. I can make the process more robust by starting without the cache if it cannot be read.