nuxt / nuxt

The Intuitive Vue Framework.
https://nuxt.com
MIT License
54.84k stars 5.02k forks source link

v3.11.0 causes Error: ENOENT: no such file or directory, access '/var/folders/0d...' when 500 #26343

Closed maikmetzger closed 5 months ago

maikmetzger commented 7 months ago

Environment


Reproduction

Unfortunately I cannot upload a repo, due to it being an in-house project for a client. However. I am using Directus and Nuxt, I get data from Directus as usual with a function. I created a test page to replicate the issue.

Normally the .value down in the div can't be read.

<script setup lang="ts">
const data = ref();

const fetchWebsiteData = async (): Promise<any> => {
  try {
    // fetching data from directus
    const website = ["test"];

    return website[0];
  } catch (error) {
    console.error("Error fetching website data", error);
  }
};

onMounted(async () => {
  data.value = await fetchWebsiteData();
});
</script>

<template>
  <div>{{ data.value }}</div>
</template>

Describe the bug

Using Nuxt 3.10.3 I get this error:

500
Cannot read properties of undefined (reading 'value')

at renderComponentSubTree (./node_modules/.pnpm/@vue+server-renderer@3.4.21_vue@3.4.21/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:695:9)
at renderComponentVNode (./node_modules/.pnpm/@vue+server-renderer@3.4.21_vue@3.4.21/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:641:12)
at renderVNode (./node_modules/.pnpm/@vue+server-renderer@3.4.21_vue@3.4.21/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:755:14)
at renderComponentSubTree (./node_modules/.pnpm/@vue+server-renderer@3.4.21_vue@3.4.21/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:710:7)
at renderComponentVNode (./node_modules/.pnpm/@vue+server-renderer@3.4.21_vue@3.4.21/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:641:12)
at renderVNode (./node_modules/.pnpm/@vue+server-renderer@3.4.21_vue@3.4.21/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:755:14)
at renderVNode (./node_modules/.pnpm/@vue+server-renderer@3.4.21_vue@3.4.21/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:759:9)
at renderComponentSubTree (./node_modules/.pnpm/@vue+server-renderer@3.4.21_vue@3.4.21/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:710:7)
at renderComponentVNode (./node_modules/.pnpm/@vue+server-renderer@3.4.21_vue@3.4.21/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:641:12)

Just a 500 error, when removing the content inside div and reloading, it works again.

Doing the same with Nuxt 3.11.0 will cause in a 503 service unavailable and Error: ENOENT: no such file or directory, access '/var/folders/0d...' error. I cannot fix the error and reload the page again. I need to kill pnpm dev and run it again.

{ "statusCode": 404, "statusMessage": "Cannot find any path matching /test.", "stack": [] }

upon first load of the same page. After another reload it will instantly show the ENOENT error and in console:

 ERROR  [nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'value')
  at _sfc_ssrRender (./pages/test.vue:52:194)  
  at renderComponentSubTree (./node_modules/.pnpm/@vue+server-renderer@3.4.21_vue@3.4.21/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:695:9)  
  at renderComponentVNode (./node_modules/.pnpm/@vue+server-renderer@3.4.21_vue@3.4.21/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:641:12)  
  at renderVNode (./node_modules/.pnpm/@vue+server-renderer@3.4.21_vue@3.4.21/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:755:14)  
  at renderComponentSubTree (./node_modules/.pnpm/@vue+server-renderer@3.4.21_vue@3.4.21/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:710:7)  
  at renderComponentVNode (./node_modules/.pnpm/@vue+server-renderer@3.4.21_vue@3.4.21/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:641:12)  
  at renderVNode (./node_modules/.pnpm/@vue+server-renderer@3.4.21_vue@3.4.21/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:755:14)  
  at renderVNode (./node_modules/.pnpm/@vue+server-renderer@3.4.21_vue@3.4.21/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:759:9)  
  at renderComponentSubTree (./node_modules/.pnpm/@vue+server-renderer@3.4.21_vue@3.4.21/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:710:7)  
  at renderComponentVNode (./node_modules/.pnpm/@vue+server-renderer@3.4.21_vue@3.4.21/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:641:12)

What I expected: It should throw the regular 500 error page, instead it throws the ENOENT error which won't let me fix the issue and reload the page like it used to be with 3.10.3. Console throws 503 errors in browser then.

If other context is needed, please tell me. I haven't done such reports yet.

Additional context

No response

Logs

No response

github-actions[bot] commented 7 months ago

Would you be able to provide a reproduction? πŸ™

More info ### Why do I need to provide a reproduction? Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making. ### What will happen? If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect. If `needs reproduction` labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it. ### How can I create a reproduction? We have a couple of templates for starting with a minimal reproduction: πŸ‘‰ https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz πŸ‘‰ https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox A public GitHub repository is also perfect. πŸ‘Œ Please ensure that the reproduction is as **minimal** as possible. See more details [in our guide](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction). You might also find these other articles interesting and/or helpful: - [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required) - [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/minimal-reproducible-example)
maikmetzger commented 7 months ago

Okay, I tested it with a new project. In that it works. I guess something must be odd with the existing one being upgraded. I deleted pnpm-lock.yml and node_modules multiple times, but that isn't it, same error.

danielroe commented 7 months ago

Maybe you have multiple versions of Vue in your project? Would you try running npm why vue?

GhostvOne commented 7 months ago

Since 3.10 I noticed this error too. It's happening totally randomly, i'm not able to make a reproduction

jelmerdemaat commented 7 months ago

I have this same issue when I upgrade from v3.10.3 to v3.11.0. I believe it happens when you have a pages that generates a 500 server error.

My system info:

 System:
    OS: macOS 14.3
    CPU: (10) arm64 Apple M1 Pro
    Memory: 437.81 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.8.1 - ~/.nvm/versions/node/v20.8.1/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.8.1/bin/npm
  Browsers:
    Chrome: 123.0.6312.59
    Safari: 17.3
    Safari Technology Preview: 17.4
  npmPackages:
    @nuxt/devtools: ^1.0.8 => 1.0.8
    nuxt: ^3.10.3 => 3.10.3 (this was before the update)
luizzappa commented 2 weeks ago

I faced a similar issue when migrating to Nuxt version 3.13.2. In my case, it started with a maximum call stack size exceeded error because I had a component in the folder structure components/UserPanel/Menu.vue. I was also using PrimeVue, which has a component named Menu as well. I thought my component would be recognized only as UserPanelMenu, but for some reason, the Menu component was also referring to my UserPanelMenu, causing the stack overflow.

To resolve it, I renamed the file from Menu.vue to LateralMenu.vue, which stopped the stack overflow, but then I encountered the error ENOENT: no such file or directory, access.... I tried everything β€” cleaning the .nuxt, deleting node_modules and package-lock.json, and reinstalling everything, but the error persisted.

What finally worked was renaming the file from LateralMenu.vue to Lateral.vue, and the error disappeared, and everything started working again. I have no idea why this worked, though.

New tests: I tried changing the file name back to Menu.vue, the stack overflow error came back. However, renaming it to LateralMenu.vue also worked (it was working only with name Lateral.vue). Anyway, I have no idea what happened.

I have the layout:

<template>
  <div class="layout-container">
    <UserPanelMenu />
    <div class="content-container">
      <slot />
    </div>
  </div>
</template>

And the components/UserPanel/Menu.vue:

<template>
<!--- other things --->
  <Menu /> <!--- PrimeVue Menu. It causes overflow if this file is called Menu too --->
</template>