vercel error no such file or directory, open '/var/task/node_modules/shiki/themes/one-dark-pro.json' #52711

2820402 · 2023-07-15T06:04:32Z

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:19 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T8103
    Binaries:
      Node: 16.16.0
      npm: 9.8.0
      Yarn: 1.22.19
      pnpm: 7.16.0
    Relevant Packages:
      next: 13.4.10
      eslint-config-next: 13.4.10
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App Router

Link to the code that reproduces this issue or a replay of the bug

.

To Reproduce

import { serialize } from 'next-mdx-remote/serialize';
import readingTime from 'reading-time';
import remarkGfm from 'remark-gfm';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import rehypePrettyCode from 'rehype-pretty-code';

/** @type {import('rehype-pretty-code').Options} */
const options = {
    theme: 'one-dark-pro',
    onVisitLine(node: any) {
        if (node.children.length === 0) {
            node.children = [{ type: 'text', value: ' ' }];
        }
    },
    onVisitHighlightedLine(node: any) {
        node.properties.className.push('line--highlighted');
    },
    onVisitHighlightedWord(node: any) {
        node.properties.className = ['word--highlighted'];
    },
};

export async function mdxToHtml(source: any) {
    const mdxSource = await serialize(source, {
        mdxOptions: {
            remarkPlugins: [remarkGfm],
            rehypePlugins: [
                rehypeSlug,
                [rehypePrettyCode, options],
                [
                    rehypeAutolinkHeadings,
                    {
                        properties: {
                            className: ['anchor'],
                        },
                    },
                ],
            ],
            format: 'mdx',
        },
    });

    return {
        html: mdxSource,
        wordCount: source.split(/\s+/gu).length,
        readingTime: readingTime(source).text,
    };
}

got this error in vercel logs while building pages and i am using app router

ENOENT: no such file or directory, open '/var/task/node_modules/shiki/themes/one-dark-pro.json'
and i also install shiki package

Describe the Bug

got this error in vercel logs while building pages and i am using app router

Expected Behavior

mdx

Which browser are you using? (if relevant)

brave

How are you deploying your application? (if relevant)

Vercel

Complexia · 2023-07-17T14:58:30Z

Hey, I have the same issue. My json file is located in root, and it works fine locally, but when trying to load it on Vercel, I get the
ENOENT: no such file or directory, open '/var/task/file.json
error.

Using NextJS 13 app router

ghosthash · 2023-07-17T17:43:35Z

Same issue here.

2820402 · 2023-07-18T02:44:49Z

Hey, I have the same issue. My json file is located in root, and it works fine locally, but when trying to load it on Vercel, I get the ENOENT: no such file or directory, open '/var/task/file.json error.

Using NextJS 13 app router

I am also using the app directory did you find some fix?

shuding · 2023-07-19T08:53:02Z

This is likely related to next-mdx-remote and Shiki. Sounds like the file tracking is not handling it correctly.

2820402 · 2023-07-22T03:14:15Z

This is likely related to next-mdx-remote and Shiki. Sounds like the file tracking is not handling it correctly.

did you find some fix for that?

edgarasben · 2023-07-22T11:55:38Z

Having the same issue

kacperadler · 2023-07-29T18:49:57Z

Same here :/

2820402 · 2023-07-30T01:56:21Z

Still no response from nextjs team😔

Lu-TheCoder · 2023-07-31T20:46:02Z

I am having the same issue unfortunately

L0giXX · 2023-08-09T17:59:28Z

Did anyone find a solution to this problem?

Lu-TheCoder · 2023-08-09T18:13:04Z

Did anyone find a solution to this problem?

does it occur when you navigate to a dynamic page? for example if your building a blog website it would be at www.website.com/blog/your-dynamic-blog-post

if so then you might need to use next.js 13 generateStaticParams() function if your not already doing so, as this occurred with me as well until I generated my static params and the error went away

2820402 · 2023-08-10T02:59:57Z

Did anyone find a solution to this problem?

does it occur when you navigate to a dynamic page? for example if your building a blog website it would be at www.website.com/blog/your-dynamic-blog-post

if so then you might need to use next.js 13 generateStaticParams() function if your not already doing so, as this occurred with me as well until I generated my static params and the error went away

I am using generatestaticparamas in my dynamic route but I set a limit for 100 blogs to build on build time as if I build all the blogs at build time this take time so I will then generate the rest of blogs on demand when someone come to that slug I will then call the cms to check if there is any blog related to that slug if not i return 404 this is more efficient way

alivault · 2023-08-11T06:12:33Z

Did anyone find a solution to this problem?

I found the answer here:
shikijs/shiki#138 (comment)

basically in nextjs there are 3 states:

build-time, on server -> this is getStaticProps
run-time, on server -> this is getServerSideProps, or getStaticProps in case of ISR, which is this issue
run-time, on client

We want Shiki on getServerSideProps. This means:

ALL languages are available
ALL themes are available
NONE of them are bundled into client side

The trick is:

Copy shiki/themes and shiki/languages to somewhere outside of node_modules, maybe under lib/shiki
Touch these folders in a server side function (e.g. fs.readdirSync)
Done!

The key here is to let Vercel nft to know about the existence of Shiki/themes and shiki/languages so they are included in the production run-time

Sample code: https://github.com/thien-do/memos.pub/blob/a3babb1f149f05c43012278331f885d81f5fcfac/lib/mdx/plugins/code.ts

credit to thien-do

dm1nh · 2023-08-18T15:18:27Z

Did anyone find a solution to this problem?

I found the answer here: shikijs/shiki#138 (comment)

basically in nextjs there are 3 states:
* build-time, on server -> this is getStaticProps

* run-time, on server -> this is getServerSideProps, or getStaticProps in case of ISR, which is this issue

* run-time, on client
We want Shiki on getServerSideProps. This means:
* ALL languages are available

* ALL themes are available

* NONE of them are bundled into client side
The trick is:
* Copy shiki/themes and shiki/languages to somewhere outside of node_modules, maybe under lib/shiki

* Touch these folders in a server side function (e.g. fs.readdirSync)

* Done!
The key here is to let Vercel nft to know about the existence of Shiki/themes and shiki/languages so they are included in the production run-time

Sample code: https://github.com/thien-do/memos.pub/blob/a3babb1f149f05c43012278331f885d81f5fcfac/lib/mdx/plugins/code.ts

credit to thien-do

Not work for me in a monorepo setup with Turborepo. I followed this and when I check the build output (.next directory), shiki assets are not still there. My app runs perfectly in local machine.

alivault · 2023-08-20T23:58:28Z

@dangminhngo you won't see the shiki assets in the .next folder because Next.js uses webpack to bundle and optimize the application. During this process, files might be renamed, minified, and split into different chunks. This could include combining various dependencies into common chunks, so finding individual files might be challenging.

The critical aspect of the solution above is that it makes Vercel aware of the existence of the Shiki assets so they are included at runtime on the server. The exact location in the build folder might not be straightforward to identify, but as long as the deployed site is working as intended, it indicates that the assets are being correctly handled.

To make rehype-pretty-code work properly, shiki files need to be included in production environment on Vercel. By reading shiki files, Vercel becomes aware that those files should be included. vercel/next.js#52711 (comment)

clearly-outsane · 2023-11-08T21:38:16Z

I did that ^ but now I just get the same error with the new path of /lib/shiki. Is it supposed to be a different path for monorepos with a project that uses app directory?

mdavish · 2023-11-09T02:38:06Z

Any updates from the Vercel team here @shuding ? Feels like this is something that should just work without having to hack NFT

remarkablejames · 2023-11-13T04:46:29Z

No fix for this issue yet? I am having the same problem in production (Vercel)

jofelipe · 2023-11-14T12:32:18Z

Facing the same issue in production (Vercel), but my build has no errors
Tried a lot of changes in my files directory but it didn't work :(

jofelipe · 2023-11-15T15:12:51Z

The trick is:

Copy shiki/themes and shiki/languages to somewhere outside of node_modules, maybe under lib/shiki

Touch these folders in a server side function (e.g. fs.readdirSync)

Done!

The key here is to let Vercel nft to know about the existence of Shiki/themes and shiki/languages so they are included in the production run-time

Sample code: https://github.com/thien-do/memos.pub/blob/a3babb1f149f05c43012278331f885d81f5fcfac/lib/mdx/plugins/code.ts

credit to thien-do

Tricky hack but works!

gokulkrishh · 2023-11-23T04:37:23Z

Did anyone find a solution to this problem?

I found the answer here: shikijs/shiki#138 (comment)

basically in nextjs there are 3 states:

build-time, on server -> this is getStaticProps

run-time, on server -> this is getServerSideProps, or getStaticProps in case of ISR, which is this issue

run-time, on client

We want Shiki on getServerSideProps. This means:

ALL languages are available

ALL themes are available

NONE of them are bundled into client side

The trick is:

Copy shiki/themes and shiki/languages to somewhere outside of node_modules, maybe under lib/shiki

Touch these folders in a server side function (e.g. fs.readdirSync)

Done!

The key here is to let Vercel nft to know about the existence of Shiki/themes and shiki/languages so they are included in the production run-time

Sample code: https://github.com/thien-do/memos.pub/blob/a3babb1f149f05c43012278331f885d81f5fcfac/lib/mdx/plugins/code.ts

credit to thien-do

This worked for me. Thanks.

smohadjer · 2023-12-14T10:34:46Z

I have the same problem and I'm not using any frameworks even. My json folder is in root and it works with vercel dev locally, but when deployed the path is logged as /var/task/json/data.json and can't be found, though I see on Vercel's website under source > output that the json folder and data.json file exist. In my serverless function I'm reading the file like this:

fs.readFileSync(path.join(process.cwd(), 'json/data.json'));

smohadjer · 2023-12-14T12:10:56Z

Hey, I have the same issue. My json file is located in root, and it works fine locally, but when trying to load it on Vercel, I get the ENOENT: no such file or directory, open '/var/task/file.json error.

Using NextJS 13 app router

I had the same problem and could fix it by moving my json file to public folder. So in my project root I have api and public folders and in my api serverless function I can read json like this:

import path from 'path';
import fs from 'fs';

const jsonPath = path.join(process.cwd(), 'public', 'data.json');
const jsonContent = fs.readFileSync(jsonPath, 'utf8');

helloanoop · 2024-01-22T11:26:44Z

My issue was related to shiki.
This #52711 (comment) helped me 🙏

Commit ref: brulang/bru-website@2a85019

linzhe141 · 2024-04-08T10:01:39Z

Having the same issue

linzhe141 · 2024-04-08T12:52:16Z

Having the same issue

I feel like it is caused by some caching strategy. If I use the latest hash URL of vercel, it will work normally.

ctessier · 2024-05-19T14:42:53Z

const jsonPath = path.join(process.cwd(), 'public', 'data.json');

I have my file in the public folder too, and do exactly what you do here, but I still get the following error:

Error: ENOENT: no such file or directory, open '/var/task/public/images/map_western_cape_kruger.jpg'

The picture is available when browsing https://project-name.vercel.app/images/map_western_cape_kruger.jpg

Any idea?
Thank you

linzhe141 · 2024-05-20T01:29:12Z

const jsonPath = path.join(process.cwd(), 'public', 'data.json');

I have my file in the public folder too, and do exactly what you do here, but I still get the following error:

Error: ENOENT: no such file or directory, open '/var/task/public/images/map_western_cape_kruger.jpg'

The picture is available when browsing https://project-name.vercel.app/images/map_western_cape_kruger.jpg

Any idea? Thank you

I changed the domain and it worked

ctessier · 2024-05-20T05:51:40Z

I changed the domain and it worked

I don't understand.
My issue is the error on the backend when trying to load a page which has a server logic of reading the image. I don't see the relation with the domain, as it is only backend issue here.

linzhe141 · 2024-05-20T08:14:46Z

I changed the domain and it worked

I don't understand. My issue is the error on the backend when trying to load a page which has a server logic of reading the image. I don't see the relation with the domain, as it is only backend issue here.

I also use fs to read files in rsc, and this problem occurred, But when I change the domain, it works

linzhe141 · 2024-05-20T08:19:39Z

const jsonPath = path.join(process.cwd(), 'public', 'data.json');

I have my file in the public folder too, and do exactly what you do here, but I still get the following error:

Error: ENOENT: no such file or directory, open '/var/task/public/images/map_western_cape_kruger.jpg'

The picture is available when browsing https://project-name.vercel.app/images/map_western_cape_kruger.jpg

Any idea? Thank you

when I use this hash URL, it works.

ctessier · 2024-05-20T09:54:35Z

when I use this hash URL, it works.

You don't get it. The image is accessible on the different domains as it is in the public folder (branch, preview, etc.). The problem is when trying to reading it from the server with fs.readFileSync for instance. On the frontend I get this:

In the logs I have: Error: ENOENT: no such file or directory, open '/var/task/public/images/map_western_cape_kruger.jpg'

Here is my code:

import path from 'path';
import getImageSize from 'image-size';
import Image, { type ImageProps } from 'next/image';
import { cn } from '@/libs/utils';

interface MdxImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {}

export default function MdxImage(props: MdxImageProps) {
  if (!props.src) return;

  const newProps = { ...props };
  const isLocalImage = !props.src.startsWith('http');

  newProps.className = cn('m-auto', newProps.className);

  if (!props.width && !props.height && isLocalImage) {
    const filePath = path.join(process.cwd(), 'public', props.src);
    const dimensions = getImageSize(filePath); // <===== I guess it breaks here

    newProps.width = dimensions.width;
    newProps.height = dimensions.height;
  }

  return <Image {...(newProps as ImageProps)} alt={newProps.alt || ''} />;
}

Zen-cronic · 2024-06-22T21:01:58Z

const jsonPath = path.join(process.cwd(), 'public', 'data.json');

I have my file in the public folder too, and do exactly what you do here, but I still get the following error:

Error: ENOENT: no such file or directory, open '/var/task/public/images/map_western_cape_kruger.jpg'

The picture is available when browsing https://project-name.vercel.app/images/map_western_cape_kruger.jpg

Any idea? Thank you

I'm facing the same issue. Already tried these to no avail:

placing my content (.md) under the public folder
using path.join(process.cwd(), "public", ...) in the serverless function
using generateStaticParams() for each piece of content (e.g., blogposts)

rakhaviantoni · 2024-08-05T06:39:18Z

const jsonPath = path.join(process.cwd(), 'public', 'data.json');

I have my file in the public folder too, and do exactly what you do here, but I still get the following error:

Error: ENOENT: no such file or directory, open '/var/task/public/images/map_western_cape_kruger.jpg'

The picture is available when browsing https://project-name.vercel.app/images/map_western_cape_kruger.jpg

Any idea? Thank you

Any update to solve this? Facing the same issue here

rakhaviantoni · 2024-08-05T08:49:18Z

const jsonPath = path.join(process.cwd(), 'public', 'data.json');

I have my file in the public folder too, and do exactly what you do here, but I still get the following error:
Error: ENOENT: no such file or directory, open '/var/task/public/images/map_western_cape_kruger.jpg'
The picture is available when browsing https://project-name.vercel.app/images/map_western_cape_kruger.jpg
Any idea? Thank you

Any update to solve this? Facing the same issue here

Okay the workaround I found is to convert as base64 first, thankfully worked like charm

ryanwolhuter · 2024-08-23T13:20:26Z

stuck here too, must be an issue with vercel. their guide literally describes doing exactly what we are doing, but it breaks with the error above https://vercel.com/guides/loading-static-file-nextjs-api-route

process.cwd() is returning /var/task/ when run on the vercel sever.

kamaladdi34 · 2024-08-25T23:17:07Z

Hey guys I also had this problem, try using an api route to read your file, It is the only way that worked for me.
Happy Coding! 😊

Lezgig · 2024-09-19T13:23:02Z

Do we have any updates on this ? I am running in the same issue

Error: ENOENT: no such file or directory, open '/var/task/public/data.json'

Not too sure about the maintainability of the solution proposed by alivault #52711 (comment)

EDIT :

Hey guys I also had this problem, try using an api route to read your file, It is the only way that worked for me. Happy Coding! 😊

did this & it works fine but Next could put a disclaimer on their website if such behavior is intended at least

levtsypanov · 2024-09-22T19:47:04Z

Do we have any updates on this ? I am running in the same issue

Error: ENOENT: no such file or directory, open '/var/task/public/data.json'

Not too sure about the maintainability of the solution proposed by alivault #52711 (comment)

EDIT :

Hey guys I also had this problem, try using an api route to read your file, It is the only way that worked for me. Happy Coding! 😊

did this & it works fine but Next could put a disclaimer on their website if such behavior is intended at least

I solved the problem for myself this way:

const dataFilePath = path.resolve(process.cwd() + '/app/public/data.json') (Read-only)

You can't write data to vercel, only read it, because you don't have full access to the disk. I recommend you to read from vercel/vercel#5320.

As for media storage, it is better to use Vercel Blob.

daveycodez · 2024-10-23T10:25:03Z

https://vercel.com/guides/how-can-i-use-files-in-serverless-functions

Looks like you need to use path.join with process.cwd()

luxonauta · 2024-12-03T02:40:32Z

I was having similar issues, and the solution I found was to add the following to my settings:

experimental: {
    outputFileTracingRoot: path.join(__dirname),
    outputFileTracingIncludes: {
      "/api/**/*": ["src/components/recipes/**/*"]
    }
  }

Maybe it's my inexperience, but I spent a lot of time browsing the docs to find this guide. Here is my repo. I hope it helps.

2820402 added the bug Issue was opened via the bug report template. label Jul 15, 2023

nhtyy mentioned this issue Aug 4, 2023

Remote Hosting + Server side rendering rehype-pretty/rehype-pretty-code#98

Closed

sonsurim mentioned this issue Aug 6, 2024

fix: vercel 배포 시 오류 해결 hamsurang/origin#36

Merged

This comment has been minimized.

Sign in to view

samcx removed the bug Issue was opened via the bug report template. label Jan 29, 2025

vercel error no such file or directory, open '/var/task/node_modules/shiki/themes/one-dark-pro.json' #52711

vercel error no such file or directory, open '/var/task/node_modules/shiki/themes/one-dark-pro.json' #52711

Comments

2820402 commented Jul 15, 2023

Verify canary release

Provide environment information

Which area(s) of Next.js are affected? (leave empty if unsure)

Link to the code that reproduces this issue or a replay of the bug

To Reproduce

Describe the Bug

Expected Behavior

Which browser are you using? (if relevant)

How are you deploying your application? (if relevant)

Complexia commented Jul 17, 2023

ghosthash commented Jul 17, 2023

2820402 commented Jul 18, 2023

shuding commented Jul 19, 2023

2820402 commented Jul 22, 2023

edgarasben commented Jul 22, 2023

kacperadler commented Jul 29, 2023

2820402 commented Jul 30, 2023

Lu-TheCoder commented Jul 31, 2023

L0giXX commented Aug 9, 2023

Lu-TheCoder commented Aug 9, 2023

2820402 commented Aug 10, 2023

alivault commented Aug 11, 2023 • edited Loading

dm1nh commented Aug 18, 2023 • edited Loading

alivault commented Aug 20, 2023

clearly-outsane commented Nov 8, 2023 • edited Loading

mdavish commented Nov 9, 2023

remarkablejames commented Nov 13, 2023

jofelipe commented Nov 14, 2023

jofelipe commented Nov 15, 2023

gokulkrishh commented Nov 23, 2023

smohadjer commented Dec 14, 2023 • edited Loading

smohadjer commented Dec 14, 2023 • edited Loading

helloanoop commented Jan 22, 2024

linzhe141 commented Apr 8, 2024

linzhe141 commented Apr 8, 2024

ctessier commented May 19, 2024

linzhe141 commented May 20, 2024

ctessier commented May 20, 2024

linzhe141 commented May 20, 2024 • edited Loading

linzhe141 commented May 20, 2024

ctessier commented May 20, 2024

Zen-cronic commented Jun 22, 2024

rakhaviantoni commented Aug 5, 2024

rakhaviantoni commented Aug 5, 2024

ryanwolhuter commented Aug 23, 2024 • edited Loading

kamaladdi34 commented Aug 25, 2024

This comment has been minimized.

Lezgig commented Sep 19, 2024 • edited Loading

levtsypanov commented Sep 22, 2024

daveycodez commented Oct 23, 2024

luxonauta commented Dec 3, 2024

alivault commented Aug 11, 2023 •

edited

Loading

dm1nh commented Aug 18, 2023 •

edited

Loading

clearly-outsane commented Nov 8, 2023 •

edited

Loading

smohadjer commented Dec 14, 2023 •

edited

Loading

smohadjer commented Dec 14, 2023 •

edited

Loading

linzhe141 commented May 20, 2024 •

edited

Loading

ryanwolhuter commented Aug 23, 2024 •

edited

Loading

Lezgig commented Sep 19, 2024 •

edited

Loading