Unable to run `npm run build` due to `Error: ENOENT: no such file or directory`

[sgrobert]

Verify canary release

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

Provide environment information

next info

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:04:44 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T8103
    Binaries:
      Node: 16.17.1
      npm: 9.2.0
      Yarn: 1.22.19
      pnpm: 7.22.0
    Relevant packages:
      next: 13.1.4
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

---

package.json

• "@next/font": "^13.1.4",
• "next": "^13.1.5-canary.2",

---

next.config.js

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    appDir: true,
  },
  staticPageGenerationTimeout: 1000,
}

module.exports = nextConfig

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

No response

Link to the code that reproduces this issue

https://stackblitz.com/edit/vercel-next-js-ubvjrc?file=app%2Flayout.jsx,next.config.js

To Reproduce

1. Run npm install
2. Run npm run build

---

Sample Execution In StackBlitz:

Describe the Bug

While attempting to run the command npm run build, the following error message pops up:

...

info  - Creating an optimized production build  
info  - Compiled successfully
info  - Linting and checking validity of types  
info  - Collecting page data  
info  - Generating static pages (24/24)

> Build error occurred
[Error: ENOENT: no such file or directory, rename '/Users/.../.next/export/404.html' -> '/Users/.../.next/server/pages/404.html'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'rename',
  path: '/Users/.../.next/export/404.html',
  dest: '/Users/.../.next/server/pages/404.html'
}
info  - Finalizing page optimization .%      

END OF `npm run build`.

---

I tried the following multiple solutions in an attempt to resolve the issue, but the error still occurs:
[1] Moved Affected Files Out To Temp Folder /app-backup Instead of Keeping Under /app

• (a) Moved /app/(error-pages)/404/page.jsx to /app-backup/404/page.jsx
• (b) Error is thrown for the next file instead for /app/(error-pages)/500/page.jsx
• (c) The same thing happened when I attempted to move the same file for /app/(error-pages)/500/page.jsx
• (d) The same issue repeats for other files when [1c] was moved.

[2] Reinstalled Node Packages

• Based on Stackoverflow: https://stackoverflow.com/questions/69295639/next-build-issue-with-file-names
• (a) Deleted package-lock.json
• (b) Reinstalled node_modules via npm install
• (c) Same problem arises when running npm run build
• (d) Followed up with secondary instructions via: https://stackoverflow.com/questions/49651221/npm-enoent-no-such-file-or-directory-rename
• (e) Verified npm cache via npm cache verify
• (f) Ran thru [2a] -> [2c]. Same results
• (g) Tried cleaning the cache via npm cache clean
• (h) Ran thru [2a] -> [2c]. Same results

[3] Added staticPageGenerationTimeout To next.config.js

• Based on nextjs.org documentation: Static page generation timed out after multiple attempts: https://nextjs.org/docs/messages/static-page-generation-timeout
• Injected staticPageGenerationTimeout: 1000, within next.config.js
• Ran thru [2a] -> [2c]. Same results

[4] Attempted Alternative Solutions via NextJS's Issues Docs

• Based on NextJS's GitHub Issues: (i) Error: ENOENT: no such file or directory, lstat '/app/.next/server/app' #44442
• Based on NextJS's GitHub Issues: (ii) output: 'standalone' error: ENOENT: no such file or directory, lstat .next/server/app #44120
• (a) Tried temporary fix suggestion from output: 'standalone' error: ENOENT: no such file or directory, lstat .next/server/app #44120 (comment)
• (b) Ran thru [2a] -> [2c]. Same results

[5] Updated NextJs to the Latest Canary Version

• (a) Updated from "next": "^13.1.4" to "next": "^13.1.5-canary.2"
• (b) Ran thru [2a] -> [2c]. Same results

Expected Behavior

The npm run build process should complete as per normal, especially when all relevant bugs are fixed, which will signal to me that the build will run safely on a server-execution.

Which browser are you using? (if relevant)

Brave Version 1.47.171 Chromium: 109.0.5414.87 (Official Build) (arm64)

How are you deploying your application? (if relevant)

Localhost Only, running npm run build, which executes next build.

[github-actions]

We cannot recreate the issue with the provided information. Please add a reproduction in order for us to be able to investigate.

Why was this issue marked with the please add a complete reproduction label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository (template), but you can also use a tool like CodeSandbox or StackBlitz.

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue.

Please test your reproduction against the latest version of Next.js (next@canary) to make sure your issue has not already been fixed.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

What happens if I don't provide a sufficient minimal reproduction?

Issues with the please add a complete reproduction label that receives no meaningful activity (e.g. new comments with a reproduction link) are automatically closed and locked after 30 days.

If your issue has not been resolved in that time and it has been closed/locked, please open a new issue with the required reproduction.

I did not open this issue, but it is relevant to me, what can I do to help?

Anyone experiencing the same issue is welcome to provide a minimal reproduction following the above steps. Furthermore, you can upvote the issue using the 👍 reaction on the topmost comment (please do not comment "I have the same issue" without repro steps). Then, we can sort issues by votes to prioritize.

I think my reproduction is good enough, why aren't you looking into it quicker?

We look into every Next.js issue and constantly monitor open issues for new comments.

However, sometimes we might miss one or two due to the popularity/high traffic of the repository. We apologize, and kindly ask you to refrain from tagging core maintainers, as that will usually not result in increased priority.

Upvoting issues to show your interest will help us prioritize and address them as quickly as possible. That said, every issue is important to us, and if an issue gets closed by accident, we encourage you to open a new one linking to the old issue and we will look into it.

Useful Resources

• How to Contribute to Open Source (Next.js)
• How to create a Minimal, Complete, and Verifiable example
• Reporting a Next.js bug
• Next.js Triaging issues

[balazsorban44]

Your repro gives a 404, could you fix? Are you trying to use next export by chance? It is not yet supported with the app directory as per https://beta.nextjs.org/docs/app-directory-roadmap#supported-and-planned-features

You also mention related standalone: "output" issues, but I don't see it in your config.

[sgrobert]

Hi @balazsorban44 ,

My apologies... I've just rechecked the link and here is the working link in incognito:

https://stackblitz.com/edit/vercel-next-js-pchf6t?file=next.config.js

[kfirfitousi]

It seems like you can't have routes like /404 and /500 in the app directory. Changing them to /e404 and /e500 solved the problem.
You should be using a not-found.tsx file for dealing with 404 errors: https://beta.nextjs.org/docs/api-reference/notfound

[sgrobert]

Hi @kfirfitousi ,

Thanks for the clarification. Just pulled the folders out of /app and it does seem to work.

May I check with you let's say if /404 is handled by not-found.tsx in NextJS 13, and for other 5XX errors I can just rename the files, would you happen to know what about those other 4XX custom client-side files such as /401 or /403, should I just rename to a /403-error page or are there other default files that will be used by NextJS 13 to replace such files like not-found.tsx?

Thank you!

[kfirfitousi]

You can use the error.tsx file for error handling.
Here is a basic example:

// app/error.tsx
'use client';

export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <html>
      <head></head>
      <body>
        <h2>Something went wrong!</h2>
        <h3>{error.message}</h3>
        <button onClick={() => reset()}>Try again</button>
      </body>
    </html>
  );
}

And then in a page/component any error thrown will be caught:

// app/page.tsx
export default async function Home() {
  await fetch('some-non-existent-url'); 
  // ^ will throw Error with message: "Failed to parse URL from some-non-existent-url"
  return <h1>Home</h1>;
}

Which will render the Error component like so:

You can also wrap the error-producing code with a try-catch block to throw a custom error:

// app/page.tsx
export default async function Home() {
  try {
    await fetch('some-non-existent-url');
  } catch (e) {
    throw new Error('Custom error message');
  }
  return <h1>Home</h1>;
}

[sgrobert]

Hi @kfirfitousi ... Thank you for the additional help and examples! Really appreciate it!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.