Open 2820402 opened 1 year ago
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
Same issue here.
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?
This is likely related to next-mdx-remote and Shiki. Sounds like the file tracking is not handling it correctly.
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?
Having the same issue
Same here :/
Still no response from nextjs team😔
I am having the same issue unfortunately
Did anyone find a solution to this problem?
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
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
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:
We want Shiki on getServerSideProps. This means:
The trick is:
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
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.
@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.
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?
Any updates from the Vercel team here @shuding ? Feels like this is something that should just work without having to hack NFT
No fix for this issue yet? I am having the same problem in production (Vercel)
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 :(
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!
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.
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'));
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');
My issue was related to shiki. This https://github.com/vercel/next.js/issues/52711#issuecomment-1674254848 helped me 🙏
Commit ref: https://github.com/brulang/bru-website/commit/2a85019e217c0ee6621cdf0707a06425649f965a
Having the same issue
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.
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
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
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 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
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.
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 || ''} />;
}
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:
public
folderpath.join(process.cwd(), "public", ...)
in the serverless functiongenerateStaticParams()
for each piece of content (e.g., blogposts) 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
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 youAny update to solve this? Facing the same issue here
Okay the workaround I found is to convert as base64 first, thankfully worked like charm
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.
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! 😊
Verify canary release
Provide environment information
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
got this error in vercel logs while building pages and i am using app router
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