500 This page is temporarily unavailable.

[moshetanzer]

Environment

Production

Reproduction

Not sure how to reproduce this, since have no way to debug it seemingly. Could be wrong though.

Describe the bug

Hi,

I have come across an issue that i didnt come across before nuxt v3.9 and vue 3.4.

I am getting a screen that states "500. This page is temporarily unavailable" only a specfic page in my production site.

On dev i dont get any issue at all - and there seems no way to debug this issue since nothing is logged.

Surely there should be a way to debug fatal errors in production?

Additional context

No response

Logs

No response

[github-actions]

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.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[moshetanzer]

It is imporatnt to note that when navigating from within the nuxt app, i dont get this error. Only when directly accesing it via typing the route in url. Pretty sure that this is a bug. Dont know how to reproduce!

[moshetanzer]

@danielroe how would i reproduce this?

[danielroe]

Try to reproduce locally using nuxt build and then nuxt preview . If that doesn't reproduce it might be something like a missing environment variable in your production setup, for example.

[moshetanzer]

Ok thanks so much. Busy building - should there be a way to debug it? Also, why would that be if you can navigate to the page and all works, but when accesing it directly not?

Edit
Just finished building and preview - and it works on local perfectly...

[danielroe]

Now try node .output/server/index.mjs. This won't load env variables.

The difference between the two situations is that one is rendering the page on the server. The other is doing it on the client.

[moshetanzer]

thanks. tested that, works also there.
Am happy to DM you website link - not sure if there is much to see besides that when accessing the page directly getting this 500 error, and when accessing though a NuxtLink it working.

[moshetanzer]

Would love to solve my problem - i am sure it is my error (definilty would appreciate help with that) however these are my main points;

My two questions are;

1. Shouldn't there be a way of showing advance debugging in production?
2. Whatever this issue is (am sure it is human mistake - just no way to debug easily beside rewriting page) surely it should occur both on accessing it directly and navigating to it within nuxt.

Thanks Daniel for your help ❤️

[moshetanzer]

@danielroe here is a bit more information

Might be a vite error?

[10:34:32 PM] ERROR Internal server error: Internal server error: Soft-invalidated module "/node_modules/nuxt/dist/app/entry.js" should not have existing transform result
at handleModuleSoftInvalidation (file:///C:/Users/tanze/Desktop/raise-match-project/frontend/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:49828:15)
at doTransform (file:///C:/Users/tanze/Desktop/raise-match-project/frontend/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:49635:16)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async viteTransformMiddleware (file:///C:/Users/tanze/Desktop/raise-match-project/frontend/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:59342:32)

[warflash]

@moshetanzer
Perhaps this discussion helps with ideas: #24133, there's a few of them if you google for e.g. "nuxt This page is temporarily unavailable"
Regarding 1., your deployed app should print some sort of error log by default to the console of the process and there is plenty of hooks and error boundries to hook into and do custom logging/error handling -> https://nuxt.com/docs/getting-started/error-handling
Regarding 2., like Daniel mentioned, navigating to a page on client renders the page on the client, not the server. If you refresh the page or navigate to the erroring page directly using the url then the server will try to render the initial HTML. It's two distinct environments so it makes sense one might throw an error if configured or used in a wrong way

[moshetanzer]

@warflash

Thanks for your answer, why then on nuxt build and preview locally do i not get this error?

[warflash]

Well your local environment I image is different to the server?
You might have different node versions, the build step might differ, different environment variables etc. etc.
While it is slightly unusual for a built version to work on only one env - it is possible as you can see

[moshetanzer]

@warflash

Thanks for your help but:

have got node engine defined in packae.json

ran it using node as @danielroe suggested shouldnt include any env var...

Do you have a suggestion how to debug, not understanding your suggestion.

Other issue quoted doesn't seem to have any solution either - what are you suggesting from there?

What i am suggesting is that this is not "Temporarily unavailable" it is an acutal issue that wont get resolved and therefore either should be a clear and dx freindly way to debug, else should display some less generic message. Additionaly, for dx there should be some way to match the navigating and accesign directly...

This is also a new issue, not sure why anything should have changed in latest vue and nuxt, but it wasnt present before

Do think it may be a vite issue...

Thanks for your help 🙏 !

[warflash]

Other issue quoted doesn't seem to have any solution either - what are you suggesting from there?

There is different people reporting different approaches that solved the problem for them, hence I linked it mentioning it might contain ideas.

Additionaly, for dx there should be some way to match the navigating and accesign directly...

You can set the page that's throwing the error for you to ssr: false, then there won't be any server rendered html allowing you to access the page through the url.

This is also a new issue, not sure why anything should have changed in latest vue and nuxt, but it wasnt present before

Vite 5 was introduced and with the error log you linked a few minutes ago (thanks for that 👍) it does look like it's vite related, this distinction also explaining why only one env of server/client is throwing the error https://github.com/vitejs/vite/blob/2836276dc0e132c4d64dc4c08fc730058406f2c0/packages/vite/src/node/server/transformRequest.ts#L398

There is also a seemingly working reproduction over on the unocss repo unocss/unocss#3472

[moshetanzer]

@warflash

Thanks again for your time.

Yeah, aware of setting to ssr:false, only thing is seo quite important specifically on this page, but definilty is a temporary solution.

What steps do you think need to be taken for a permanant solution? Is this something Nuxt should correct or Vite?

Thanks again

[moshetanzer]

@warflash do you understand what the actual error is, have quite understood...

Thanks so much

[moshetanzer]

@danielroe what do you suggest? Do you think this a bug or incompetency?

[moshetanzer]

Seems to be a reproduction now. Any update on this?

[manniL]

@moshetanzer do you also use unocss?

[moshetanzer]

Nope. Just nuxt 3. Work perfectly when on dev and on production with ssr false... really been a pain.

[manniL]

@moshetanzer Then we need a reproduction from that 👍

[moshetanzer]

@manniL Sorry, dont know anyway to debug - so cant reproduce. If you have any suggestion would be keen to try.

[manniL]

@moshetanzer You don't need to debug. Simply provide a reproduction that shows that issue as described here. Without knowing how to "make that error show", how should we fix it? 😋

[moshetanzer]

@moshetanzer You don't need to debug. Simply provide a reproduction that shows that issue as described here. Without knowing how to "make that error show", how should we fix it? 😋

I have absoloutly no idea how to reproduce since i cant put my finger on what the issue is. Just get the generic 500 with page is temporarily unaviable. But do not get it when using csr or ssr on local with build.

Do you have any suggestion of how to catch the error, it is only on one page of site..

Would be happy to dm you live links to see...

Thanks!

[zgurea1]

Hi, @moshetanzer, I have the same issue, after updating to last update, when trying to acces the build app its showing 500 This page is temporarily unavailable. If i downgrade to 3.8 works fine.

package.json :
"nuxt": "^3.9.1",
"vue": "3.4.0-rc.1",
"vue-router": "latest"

Error:
[nuxt] [request error] [unhandled] [500] Cannot find module 'D:\Desktop\cods\unificat.output\server\node_modules\vue\server-renderer\index.mjs' imported from D:\Desktop\cods\unificat.output\server\chunks\handlers\renderer.mjs
at new NodeError (node:internal/errors:406:5)
at finalizeResolution (node:internal/modules/esm/resolve:233:11)
at moduleResolve (node:internal/modules/esm/resolve:845:10)
at defaultResolve (node:internal/modules/esm/resolve:1043:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:228:38)
at ModuleWrap. (node:internal/modules/esm/module_job:85:39)
at link (node:internal/modules/esm/module_job:84:36)

[danielroe]

@zgurea1 Almost certainly you have multiple versions of Vue installed. Check and dedupe your lock file and you should be good...

[zgurea1]

@danielroe I deleted the lock, node_modules and .nuxt, did a fresh install build, and i have the same error

[danielroe]

And in your lockfile?

[zgurea1]

@danielroe I deleted yarn.lock. I need to do something else inside it?

[danielroe]

Look inside it to see whether you have more than one Vue version.

[zgurea1]

hmm, i see, i have version 3.4.0-rc.1 and 3.4.11.
I will check home. Thx!

[ZackPlauche]

Just received this issue adding @nuxtjs/tailwindcss 🤔

[ZackPlauche]

Also gone after a few refreshes 🤔

[https-eduardo]

Hi, @moshetanzer, I have the same issue, after updating to last update, when trying to acces the build app its showing 500 This page is temporarily unavailable. If i downgrade to 3.8 works fine.

package.json : "nuxt": "^3.9.1", "vue": "3.4.0-rc.1", "vue-router": "latest"

Error: [nuxt] [request error] [unhandled] [500] Cannot find module 'D:\Desktop\cods\unificat.output\server\node_modules\vue\server-renderer\index.mjs' imported from D:\Desktop\cods\unificat.output\server\chunks\handlers\renderer.mjs at new NodeError (node:internal/errors:406:5) at finalizeResolution (node:internal/modules/esm/resolve:233:11) at moduleResolve (node:internal/modules/esm/resolve:845:10) at defaultResolve (node:internal/modules/esm/resolve:1043:11) at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12) at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25) at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:228:38) at ModuleWrap. (node:internal/modules/esm/module_job:85:39) at link (node:internal/modules/esm/module_job:84:36)

I was facing the same issue, but downgrading didn't work. My solution was changing the package manager (from yarn to npm). After re-installing the dependencies and rebuild it started working. 🙏🤝

[MiniDigger]

maybe this helps somebody. I ran into this error too and daniels comment made me realize that I still have a preview version of vue 3.4, updated that and my problem went away (HangarMC/Hangar@efe3e0b)

basically you want to open your lockfile and search for server-renderer, if its there twice, you have to track down why (search where server renderer is used, then server where that is used, go up the whole tree, till you come to the root of the problem):
bad: https://github.com/HangarMC/Hangar/blob/880a9a013862df3e9242f2890396105cbcd66d72/frontend/pnpm-lock.yaml#L3477-L3494
good: https://github.com/HangarMC/Hangar/blob/staging/frontend/pnpm-lock.yaml#L3409-L3416
(should look similar with other package managers)

[moshetanzer]

Hi all,

Seem to be that when I did an upgrade oferch caused the issue. It is resolved. This isn't a bug in nuxt latest version.
Though I think better error login would be in place.

Also error message is inaccurate since it was not a temporary issue.

Additionally, to have better DX would suggest that there would be a way to test on build for 500 errors. Or some way clone the refresh on hmr since I was only getting this error on production and on full page reload or direct access.

Just my thoughts.

Thanks to @danielroe and all maintainers for this powerful framework.

Think this issue can be closed unless suggestions want to be added as nice to have...

[Pamavoc]

Hello everyone,

What solved it for me was switching back to npm. Yarn was installing two vue versions (since 3.4.15, the one bundled with nuxt is messing up Transition between pages, I decided to install vue 3.4.8, which is more stable for now). It messed up with vue/server-renderer package. Npm is taking in consideration only the 3.4.8, not both.

[RezaErfani67]

i updated my node version from 16.16.0 to 20.11.0 and solved...

[pathnirvana]

updating prod node version from 16 to 18 to match the development machine fixed the issue for me