no such file or directory vercel

[prisma rampart]

Error: ENOENT: no such file or directory, scandir '/vercel/path0/posts'

when deploying. this is what i believe to be the faulty code

import { readFileSync, readdirSync } from "fs";
import matter from "gray-matter";
import { join } from "path";

const postsDirectory = join(process.cwd(), 'posts');


export const getPostsIds = () => {
    return readdirSync(postsDirectory).map(p => p.replace(/\.mdx$/, ''));
}

const getFileContent = (path: string) => {
    let fileContent: string | undefined;

    try {
        fileContent = readFileSync(path, 'utf8')
    } catch (_) { } finally {
        return fileContent;
    }
}


type frontMatterTypes = {
    title: string,
    date: string
}

export const getPostById = (slug: string) => {
    const fullPath = join(postsDirectory, `${slug}.mdx`);

    const fileContent = getFileContent(fullPath);
    if (!fileContent) return;

    const { data, content } = matter(fileContent);


    return {
        data: data as frontMatterTypes,
        content
    }
}

export const getAllPosts = () => {
    const ids = getPostsIds();
    const posts = ids.map(id => ({ ...getPostById(id)!, href: id })).sort((a, b) => a.data.date > b.data.date ? -1 : 1)

    return posts;
}

export const dateToString = (date: string) => {
    return new Date(date).toLocaleDateString('en-US', {
        month: 'short',
        day: '2-digit',
        year: 'numeric'
    });
}

[open crown]

Hi @prisma rampart. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The error you're encountering is related to the file system and it's likely because the posts directory cannot be found in the path you've specified. This can happen when you're trying to read files in a serverless function on Vercel, as the file system is not the same as your local development environment.

In your code, you're using process.cwd() to get the current working directory. However, when Next.js compiles your code into a separate directory, the path returned by process.cwd() will be different from the Pages directory. This is why you're getting the ENOENT: no such file or directory error.

To fix this, you can use the fs and path modules to read files directly from the file system in getStaticProps or with API Routes, both of which use Serverless Functions when deployed to Vercel. Here's an example from the Next.js documentation (https://nextjs.org/docs/pages/api-reference/functions/get-static-props):

import { promises as fs } from 'fs'
import path from 'path'
 
export async function getStaticProps() {
 const postsDirectory = path.join(process.cwd(), 'posts')
 const filenames = await fs.readdir(postsDirectory)
 
 const posts = filenames.map(async (filename) => {
 const filePath = path.join(postsDirectory, filename)
 const fileContents = await fs.readFile(filePath, 'utf8')
 
 return {
 filename,
 content: fileContents,
 }
 })
 return {
 props: {
 posts: await Promise.all(posts),
 },
 }
}

In this example, fs.readdir is used to read the directory and fs.readFile is used to read the file contents. This should work in a serverless environment like Vercel.

If you're still encountering issues, you might want to consider using a database or a headless CMS to store and fetch your posts instead of reading them from the file system. This is a common practice for Next.js applications deployed on Vercel. For example, you can replace the data fetching methods in getStaticPaths and getStaticProps with your own database of choice (source (https://vercel.com/templates/next.js/hostname-rewrites)).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: