Page not found, ONLY when visiting directly with the url

Hi

I’ve deployed a nuxt 2 build here - https://master--comfy-croquembouche-30d2d1.netlify.app/

Everything works fine, except when I visit a page directly (i.e. I type it into the nav bar), I doesn’t work. See this page as an example - https://master--comfy-croquembouche-30d2d1.netlify.app/live.

However, when you use the menu to navigate to that page, it seems to work.

I am also finding different behaviour on other pages. E.g. the ‘work’ page here is found, but the content doesn’t load properly - https://master--comfy-croquembouche-30d2d1.netlify.app/work/

Has anyone encountered this issue before?

Thanks

David

Many people working with SPA’s, I could create a big long thread of giving the same response over and over…

1 Like

I added static/_redirects with the following code:

/* /index.html 200

This does not seem to work. The situation is improved, there is no 404 page now, but the page content that loads seems to be a half baked version of the home page, not the live page.

@davidf I could be wrong, since what you’re using looks like it actually leans on middleware, and I don’t help with any of those systems due to the added complexity and scope for issues that actually are on Netlify’s side of things.

I’d remove the redirect for now, I’d mistaken that nuxt wasn’t doing SSR, you’ll probably just need to wait for some assistance from Netlify.

1 Like

Thanks @nathanmartin

Over you you Netlify…

@davidf,

When I check now, this appears to be resolved.

1 Like

Hi @hrishikesh

It’s not resolved I’m afraid.

Although the page now loads (after implementing @nathanmartin’s suggested solution), it’s not loading the correct content. It seems to just load a half baked version of the homepage.

To see how the Work page should look, visit the home page here and navigate to the Work page via the menu in the top right corner.

You’ll notice that when you refresh the page after doing that, the content is not correct.

Can you see if disabling Pretty URLs helps: Build & deploy | Site settings | comfy-croquembouche-30d2d1 | Netlify?

1 Like

Thanks @hrishikesh

Bizarrely, this seems to have worked for the ‘work’ page, but the ‘live’ and ‘contact’ pages are still having issues

I’m struggling to see how this is a Netlify issue. Netlify is serving whatever you’re deploying. If your deployed files end up having errors, that’s not something we can effectively fix.

This either seems to be something specific to your code OR an issue with Nuxt. It could be a Netlify issue, but neither are we Nuxt experts or maintainers, nor we know your code. We can only speak for Netlify side of things and from our end, we’re serving the content as per the request.

Next steps for you would be:

  1. Build this locally (npm run generate) and try serving those files locally without involving a Nuxt server.
  2. Ask Nuxt, what can cause this type of an issue and what we should be looking at and we can investigate accordingly.
  3. Upgrade to Nuxt 3 to see if it solves the issue.

On a side note, I can see you’re generating a static site, so you should not need the redirect suggested above and I’d recommend removing it.

1 Like

Hi @hrishikesh

There are no issues when I build and run the website locally. We also are currently migrating from Vercel to Netlify, and our production website which is running on Vercel does not have this issue - https://www.hownowcreative.com.

So in my eyes, if the build is running fine locally and on other infrastructure, this is a Netlify issue.

Have you tried running npm run build locally, and then serving that output with npx serve?

If you aren’t using SSR or leaning on any middleware, it will be a more accurate representation of hosting on Netlify.

It’s a common claim that everything “works fine locally”, but usually people are running a develop command locally which starts a server, (and not the same command they’re running on Netlify), and often the issue can be found in configuration differences between the commands.

1 Like

npx serve is throwing this error:

const ipAddress = request.socket.remoteAddress?.replace("::ffff:", "") ?? "unknown";

SyntaxError: Unexpected token '.'

I did run npm run build and npm run start in my check above your message, rather than running the dev server

That might be fine, the ultimate check is just making sure that any “build” configuration has executed, as it’s common to have configuration that does something entirely different for build than develop.

You’ll know if it’s the case, but that seems to me like what is being produced isn’t an entirely static output.

1 Like

When you say ‘the ultimate check is just making sure that any “build” configuration has executed’, do you mean that the npm run build command has ran successfully? It seems to have

Just something else that’s probably worth mentioning, the pages that aren’t working seem to be the _slug pages. The work page is it’s own page file, whereas the contact and live pages are generated from _slug page files.

I mean that you’re actually trying to view the output of the build command, as that’s what Netlify will be trying to serve.

They’ll serve whatever it is that your Build command produces.

1 Like

@davidf,

You’re running npm run generate on Netlify. Please try the same command. As for npm run start, I think that starts the development server, not a server to serve startic output. Even if it does serve static output, I’d recommend removing Nuxt server out of the equation, so npx serve sounds ideal.

1 Like

@davidf Based on the info that you’re actually running generate, to test locally you could execute npm run generate, then go into the folder it produces and run npx serve.

You could also simply check the files/folders that it produces, as if it’s outputting a work.html file, but isn’t making a live.html or contact.html file, then it’s likely related to however the _slug system (Dynamic Pages) you mention operates in tandem with generate.

The Nuxt 2 generate docs are here: Nuxt 2 - Static Site Generation.

1 Like

Thanks for your help with this @hrishikesh and @nathanmartin

I managed to solve this issue last night after a lot of toil. The website was previously being server side rendered (on Vercel), and the Nuxt version we were using was pre full static rendering. So I needed to upgrade the Nuxt version, then do a lot of other upgrading and maintenance so that all of the packages play nicely together. It seems to now be working!

I do appear to now be seeing an additional problem, which is that the redirect rules are not working.

At the top in the deploy summary, I can see 35 redirect rules processed, so the rules in my netlify.toml file do appear to be getting processed.

Here is one of my redirects:

[[redirects]]
  from = "/welcome"
  to = "/"
  status = 200

When I visit that page, it seems to load a half baked version of the home page again and the url doesn’t change. When I visit a link that doesn’t exist and also isn’t redirected, it does show a 404, so it seems that the redirects are doing something different than an invalid page url, but they’re not working as intended.

edit: nevermind, I changed the status to 301 and it now works!