Vercel is not able to access .mp3 file in /var/task/ but .png works just fine

Help
1

I have two files: screenshot-1.png and audio.mp3.
Locally everything works just fine.
I upload both in the same route.

The filesystem on Vercel (source tab) shows that both files are there.

However, when attempting to access the file to check its existence:

    if (!fs.existsSync(filePath)) {
      throw new Error(`File ${filePath} does not exist`);
    }

this throws an error for the mp3 file, but does NOT for the png.

This is a NextJS app directory api route. File path is:
${process.cwd()}/public/assets/demo-guide/audio.mp3
and
${process.cwd()}/public/assets/demo-guide/screenshot-1.png

I am aware of the outputFileTracingIncludes and have configured it:

  outputFileTracingIncludes: {
    '/api/test/create-demo': ['./public/assets/demo-guide/audio.mp3'],
  }

but no cigar.

any help would be appreciated! NextJS 14

2

Hi, @yuvalkarmi! Welcome to Vercel Community!

You could avoid using fs operations in your API routes. Instead, you can leverage Next.js’s public directory and use absolute URLs to access your static files.

  1. Make sure your files are in the public directory. In your case, they should be in public/assets/demo-guide/
  2. Instead of checking for file existence using fs.existsSync() , you can use the fetch API to check if the file is accessible.
  3. Update your API route to use this approach. To use this API, you would make a GET request to /api/test/create-demo. The response will tell you whether each file exists and provide the paths.
  4. You can remove the outputFileTracingIncludes configuration from your next.config.js as it’s no longer necessary with this approach.

Let me know how you get on!

3

Hey @pawlean thanks for the reply.

I understand what you’re suggesting, but there are a couple of important notes:

  1. I need to read the file from disk, and would like to avoid sending a network request
  1. I don’t actually want the file to be public, that was just for testing purposes, it should live alongside the route.js file (I tried to move it to the public folder to solve the problem but this did not work)
  2. This does not explain why I have no problem at all accessing to .png files but I do have a problem accessing the mp3

Can you please provide a solution for making sure the .mp3 is deployed other than working around the fs module via a network request?

Thank you!
Yuval