Next.js can't find files in FS in Vercel deployment

[gazdazubb]

So this is somehow similar to the next topic in GH’s discussion. Although there is some difference.

Here are some highlevel details

• I have some svg icons in my website
• svg icons are bundled into 3 svg sprites (thanks to svg-sprite tool)
• sprites are included into the page with help of FS.readFileSync()

This morning everything was working. This evening this approach stopped to work. No change were done one my side (this project is my side gig; during the day I do full time job). Now when user opens a site he sees a 500th error. In the logs I see the next

⨯ Error: ENOENT: no such file or directory, open '/var/task/src/svg/sprites/briefs-icons-sprite.svg'
    at a (/var/task/.next/server/app/[locale]/page.js:1:556457)
    at e8 (/var/task/.next/server/app/[locale]/page.js:1:549697)
    at ek (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:84:13409)
    at e (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:84:17307)
    at eO (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:84:17769)
    at Array.toJSON (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:84:14915)
    at stringify (<anonymous>)
    at eU (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:84:26272)
    at eB (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:84:26502) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/var/task/src/svg/sprites/briefs-icons-sprite.svg',
  digest: '531188070'
}

Locally (build + start) everything still works. When I open “source” tab of any deployment in vercel’s control panel folder “sprites” is absent there.

In the manual there is next phrase

During next build , Next.js will use @vercel/nft to statically analyze import , require , and fs usage to determine all files that a page might load.

Well seems this is not longer the case. Even if I try to redeploy old build which also 100% used to work – now they are not working as well.

I feel like Vercel did some update of their infra today (I saw some new posts in theirs blog) and I got a bad luck.

Would be grateful on any advice

• any temporary solution how to overcome this;
• a better way how to inject sprite into the page.

here are couple of screens that should bring some more light into this

local “sprites” folder

remote “sprites” folder. or its absence

how sprite is being injected into page

read utility function

[amyegan]

Thanks for sharing all of these details. Next.js has its own build process, so you might need to use outputFileTracingIncludes in the project’s next.config.js to include all of the files you need. The guide about reading files in Vercel Functions and the Next.js output documentation have more details.

Does the project use Next.js 15, or does it use a previous version?

[gazdazubb]

yeah, its based on v15. as for your advice: example references API endpoint, but I do not have any endpoints in my app/website. or in that example endpoint eqauls to any public url within the website?

  experimental: {
    outputFileTracingIncludes: {
      '/api/another': ['./necessary-folder/**/*'],
    },
  },

meanwhile I found a workaround for my case, but I still interested in more elegant/correct solution

[amyegan]

I’m glad you found a solution that works for your project! The simplest solution I know for static assets is putting them a /public folder. I’m curious to know what workaround you found if you’re willing to share. It might help someone else in the future

[gazdazubb]

I went with pretty much the same idea, but with slight modification. here are details.

Although my goal was/is to have content of the sprite.svg included into layout.jsx so I don’t have that “additional” http GET call (sprite has size of 16kb, no minification & compressing)