Setting up NextJS on Vercel for website deployment can encounter a common error known as ENOENT Error, which is caused by the absence of a specific file or

Everything works perfectly on my local machine:

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

export default function createNewDirectory (tokenSignature: string) { 
    const directoryPath = path.join(process.cwd(), 'notes', tokenSignature);
    fs.mkdirSync(directoryPath, { recursive: true });    
}

As you can see, I have already included the recursive flag.

However, I encountered the following error:

2022-11-15T19:32:34.119Z    145c46ab-416c-4f5c-b881-80b9c623a5ac    ERROR   Error: ENOENT: no such file or directory, mkdir '/var/task/notes/jFlqLkrmIPOEnaiExiUN3ohlmJlH_GN2OD36fiQ9a2A'
    at Object.mkdirSync (node:fs:1349:3)
    at createUserDir (/var/task/.next/server/chunks/133.js:252:45)
    at getServerSideProps (/var/task/.next/server/pages/index.js:93:76)
    at Object.renderToHTML (/var/task/node_modules/next/dist/server/render.js:506:26)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async doRender (/var/task/node_modules/next/dist/server/base-server.js:701:34)
    at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (/var/task/node_modules/next/dist/server/base-server.js:806:28)
    at async /var/task/node_modules/next/dist/server/response-cache/index.js:80:36 {
  errno: -2,
  syscall: 'mkdir',
  path: '/var/task/notes/jFlqLkrmIPOEnaiExiUN3ohlmJlH_GN2OD36fiQ9a2A',
  page: '/'
}
RequestId: 145c46ab-416c-4f5c-b881-80b9c623a5ac Error: Runtime exited with error: exit status 1
Runtime.ExitError

This issue is puzzling as the recursive flag should handle it.

For context, I am using Next version 13.0.3 and Vercel with Node 16.x

Answer №1

I encountered a similar problem when attempting to utilize fs methods. One solution is to include output: 'standalone' in your next.config.js

const nextConfig = {
  // ... other config here
  output: 'standalone'
}

export default nextConfig

After researching further, I found a suggestion to add nftTracing: true, but it seems to be deprecated now.

If the previous solutions don't work, you may want to refer to this lengthy GH issue

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Execute index.js code from index.html using NodeJS and Express

Currently, I am diving into the world of NodeJS and Express using Replit.com for a small project. The main objective is to develop a basic input field that, upon submission, will post to different channels such as Discord and Twitter. The piece of code be ...

Create an object using a combination of different promises

Creating an object from multiple promise results can be done in a few different ways. One common method is using Promise.all like so: const allPromises = await Promise.all(asyncResult1, asyncResult2); allPromises.then([result1, result2] => { return { ...

Leverage the controller's properties and methods within the directive

My situation involves a variety of inputs, each with specific directives: <input mask-value="ssn" validate="checkSsn"/> <input mask-value="pin" validate="checkPin"/> These properties are managed in the controller: app.controller("Ctrl", [&ap ...

A method for modifying the key within a nested array object and then outputting the updated array object

Suppose I have an array called arr1 and an object named arr2 containing a nested array called config. If the key in the object from arr1 matches with an id within the nested config and further within the questions array, then replace that key (in the arr1 ...

Implementing Jquery Datatables in C# Codebase

I'm struggling to populate my jQuery Datatable with a List. Currently, I am writing the list to a file and accessing it in my view-model. Is this the correct approach? This is the snippet of my code: List<string> list = new List<string> ...

Can a single shield protect every part of an Angular application?

I have configured my application in a way where most components are protected, but the main page "/" is still accessible to users. I am looking for a solution that would automatically redirect unauthenticated users to "/login" without having to make every ...

A more concise validation function for mandatory fields

When working on an HTML application with TypeScript, I encountered a situation where I needed to build an error message for a form that had several required fields. In my TypeScript file, I created a function called hasErrors() which checks each field and ...

CSS Flexibility in Action

Presently, my tab bar has a fixed look as shown here: https://codepen.io/cdemez/pen/WNrQpWp Including properties like width: 400px; etc... Upon inspecting the code, you'll notice that all the dimensions are static :-( Consequently, I am encountering ...

Getting a return value from a post request in NextJs 9 Serverless: a step-by-step guide

I am currently working on a serverless application using NextJs but I have hit a roadblock when trying to retrieve a user's JWT in the return value after making a post request to my database. While everything else seems to be functioning correctly, th ...

Displaying and Concealing Divisions

My journey to showing/hiding divs began with piecing together a series of questions: $(document).ready(function(){ $('.box').hide(); $('#categories').onMouseOver(function() { $('.box').hide(); $('#div' + ...

What causes CSS animations to suddenly halt?

Recently, I've been delving into the world of CSS animations and experimenting with some examples. Below is a snippet of code where two event handlers are set up for elements, both manipulating the animation property of the same element. Initially, th ...

Webpack returns an undefined error when attempting to add a JavaScript library

I am a newcomer to webpack and I am attempting to incorporate skrollr.js into my webpack setup so that I can use it as needed. However, I am unsure of the correct approach for this. After some research, I have found that I can either use an alias or export ...

Resetting input field based on callback function

In my simple script, I have two pages - script.php and function.php. The script.php page contains an input field with the ID #code, a link with the ID #submit, and a jQuery function. $('#submit').click(function () { $.ajax({ url: 'f ...

What steps can be taken to resolve an ESLing error in this situation?

Check out this code snippet: <template v-if="isTag(field, '')"> {{ getItemValue(item, field) ? getItemValue(item, field) : '&#8211'; }} </template> An issue has been identified with the above code: Er ...

Could someone please explain why my ajax is not functioning properly?

I have been working on an AJAX function to pass input values from one page to another. However, I am facing a challenge where the value is not being passed as expected after redirection. Despite my efforts, I cannot figure out why it's not functionin ...

Issues with Node AssertionErrors cause failures to be silent and prevent proper error output

I am facing an issue with a particular method in my code. The code snippet is as follows: console.log('Trouble spot here') assert(false) console.log('Will this show up?') Upon running this code within my application, the followi ...

How come a colon within a function's body does not result in an error in JavaScript?

During my coding journey, I encountered a situation where I was attempting to return an object from an arrow function. However, I noticed that the code snippet below was simply returning undefined. After some investigation, I determined that the curly br ...

When a page is changed, the Vue.js Active Menu color remains enabled

Check out my website at . I want to customize the navigation bar so that only the active page's navbar li is colored in red. <div class="navigation-items"> <ul class="nav-list"> <li class="nav-item"><nuxt-link to="/en" ...

Experiencing a 404 error with Next JS SSR on AWS Amplify

My current setup involves using dynamic routing SSR in Next.js workflow-templates | |___ [[...page]] Everything works perfectly fine on my local machine, but when I deploy to Amplify, I'm getting a 404 error page. Do I need to conf ...

When working with Nuxt 3, the referrer header may sometimes return as undefined

I am looking to capture the referrer header and store it in a cookie so that I can later use it to populate an axios request during the user's journey on my website. In my app.vue, I currently have the following code snippet: const headers = useReque ...