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

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

About this issue

Original URL
State: open
Created a year ago
Comments: 26 (1 by maintainers)

Commits related to this issue

Add custom highlighter for rehype-pretty-code To make rehype-pretty-code work properly, shiki files need to be included in production environment on Vercel. By reading shiki files, Vercel becomes awa... — committed to momori256/momori.dev by momori256 9 months ago

Most upvoted comments

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

+26

Complexia on Jul 17, 2023

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');

+10

smohadjer on Dec 14, 2023

Did anyone find a solution to this problem?

I found the answer here: https://github.com/shikijs/shiki/issues/138#issuecomment-1057471160

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

alivault on Aug 11, 2023

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 on Dec 14, 2023

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

remarkablejames on Nov 13, 2023

@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.

alivault on Aug 20, 2023

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

shuding on Jul 19, 2023

Same issue here.

ghosthash on Jul 17, 2023