[Bug]: ENOENT: no such file or directory, scandir '/Users/alejandro/code/fun/remix-quickstart/server/posts'

[alejandronanez]

Which Remix packages are impacted?

• remix (Remix core)
• create-remix
• @remix-run/architect
• @remix-run/cloudflare-workers
• @remix-run/dev
• @remix-run/express
• @remix-run/netlify
• @remix-run/node
• @remix-run/react
• @remix-run/serve
• @remix-run/server-runtime
• @remix-run/vercel

What version of Remix are you using?

^1.0.3

Steps to Reproduce

In the developer blog tutorial:

1. This section https://remix.run/docs/en/v1/tutorials/blog#dynamic-route-params
2. This step 💿 Add a getPost function to our post module Put this function anywhere in the app/post.ts module:

When I copy that code in my example, and I go to http://localhost:3000/posts I got this error

ENOENT: no such file or directory, scandir '/Users/alejandro/code/fun/remix-quickstart/server/posts'

Expected Behavior

• I'd expect /posts not to be broken.
• I'd expect /posts/:slug not to be broken

Actual Behavior

Whenever I visit /posts/ or /posts/:slug, I get the error I mentioned above. I already tried using Vercel and Remix Server, but I got the same result.

Am I missing something?

FWIW I'm using Node 14.x

Seems to be related to #448

[ryanflorence]

The tutorial makes it more clear you should use the remix app server now, the file system stuff is relative to the output directory, not the source, go back one more directory since you're actually in "server/posts/{server-output-file}.js"

I'll go update it to add this note inline with the file system reading

[alejandronanez]

thanks @ryanflorence, that fixed it.

[ningo-agilityio]

Hi @ryanflorence I got the same issue, I even added the path

const postsPath = path.join(__dirname, "../..", "posts-data");

But it is still fail on Vercel

ENOENT: no such file or directory, scandir '/var/task/output/server/pages/posts-data'

Do I miss anything?

[mohammedmulazada]

Hello @alejandronanez, could you please share what exactly you did to solve this issue? Did you switch to the Remix App Server even for Vercel deployments?

[Adam-Collier]

I'm also hitting this issue

[Adbib]

make your Posts function like this I solve this problem and its work for me on vercel

export async function getPosts() {
  const postsPath = await fs.readdir(
    `${__dirname}/../../app/posts`,
    { withFileTypes: true }
  );

  const posts = await Promise.all(
    postsPath
      .map(async (dirent) => {
        const file = await fs.readFile(
          path.join(`${__dirname}/../../app/posts`, dirent.name)
        );
        const { attributes } = parseFrontMatter(file.toString());
        return {
          slug: dirent.name.replace(/\.mdx/, ""),
          title: attributes.title,
        };
      })
  );

  return posts;
}

[ghost]

make your Posts function like this I solve this problem and its work for me on vercel

export async function getPosts() {
  const postsPath = await fs.readdir(
    `${__dirname}/../../app/posts`,
    { withFileTypes: true }
  );

  const posts = await Promise.all(
    postsPath
      .map(async (dirent) => {
        const file = await fs.readFile(
          path.join(`${__dirname}/../../app/posts`, dirent.name)
        );
        const { attributes } = parseFrontMatter(file.toString());
        return {
          slug: dirent.name.replace(/\.mdx/, ""),
          title: attributes.title,
        };
      })
  );

  return posts;
}

Work on local dev but still broken on vercel production 😕

[Adbib]

Work on local dev but still broken on vercel production 😕

if you can please share with us your structure and some shots from your code