Nuxt•8mo ago

Nuxt / renders index.vue locally but when deployed via Netlify returns 404

Hi, as the post says I'm having trouble seeing my default page render at / when deployed via Netlify When I run the project locally everything works as expected I'm using the Pages directory atm and I made a index.vue component My project has ssr set to false and I'm runnin Nuxt as a SPA Deployment: https://chirp-shot.netlify.app/ Code is set to private but here's my nuxt config

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/color-mode', 'shadcn-nuxt', '@nuxtjs/supabase'],
  shadcn: {
    /**
     * Prefix for all the imported component
     */
    prefix: '',
    /**
     * Directory that the component lives in.
     * @default "./components/ui"
     */
    componentDir: './components/ui'
  },
  supabase:{
    redirect: false,
  },
  colorMode: {
    preference: 'system', // default value of $colorMode.preference
    fallback: 'light', // fallback value if not system preference found
    classSuffix: ''
  },
  devtools: {
      enabled: true,

      timeline: {
        enabled: true
      }
    },
    ssr: false, // SSR must be turned off
    app: {
      head: {
        meta: [
          { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' }
        ]
      }
    }
})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/color-mode', 'shadcn-nuxt', '@nuxtjs/supabase'],
  shadcn: {
    /**
     * Prefix for all the imported component
     */
    prefix: '',
    /**
     * Directory that the component lives in.
     * @default "./components/ui"
     */
    componentDir: './components/ui'
  },
  supabase:{
    redirect: false,
  },
  colorMode: {
    preference: 'system', // default value of $colorMode.preference
    fallback: 'light', // fallback value if not system preference found
    classSuffix: ''
  },
  devtools: {
      enabled: true,

      timeline: {
        enabled: true
      }
    },
    ssr: false, // SSR must be turned off
    app: {
      head: {
        meta: [
          { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' }
        ]
      }
    }
})

Solution:

Stack Overflow

How do you change the capitalization of filenames in Git?

I am trying to rename a file to have different capitalization from what it had before: git mv src/collision/b2AABB.js src/collision/B2AABB.js fatal: destination exists, source=src/collision/b2AABB....

Stack Overflow

git fails to detect renaming

One branch (refactoringBranch) had a complete directory restructure. Files were moved chaosly, but the content was preserved. I tried to merge: git merge --no-ff -Xrename-threshold=15 -Xpatience -

Jump to solution

51 Replies

Room 208•8mo ago

did it build successfully on netlify? on netlify is your base directory set as / build command: nuxt build publish directory: dist

garrlkerOP•8mo ago

yes it successfully built

garrlkerOP•8mo ago

garrlkerOP•8mo ago

here are my settings trying nuxt build to see if that fixes it same result :/

Room 208•8mo ago

https://answers.netlify.com/t/support-guide-i-ve-deployed-my-site-but-i-still-see-page-not-found/125

Netlify Support Forums

[Support Guide] I’ve deployed my site but I still see "Page not fou...

Last reviewed by Netlify Support - August, 2023 Netlify attempts to lookup a file based on several xor filters, and when all of these fail, we end up serving a 404 page. For example, a request made to /example/ would check /example/index.html, /example.html, /example/home.html and several other combinations (not necessarily in the same order) ...

Room 208•8mo ago

try this maybe

_redirects

_redirects

file in public folder with

/* /index.html 200

/* /index.html 200

inside

garrlkerOP•8mo ago

Unfortunately that didn't work I've been trying different things all day What I know is, I can npm run build or npm run generate locally, and then serve it with npx serve dist or even npx server .output/public Both work, but the moment I deploy this up to Netlify it just doesn't work Even tried cloudflare pages and same result

Room 208•8mo ago

ah weird. i wish i knew more about nuxt to help you out. what happens if you make a error.vue page? does that one get served instead of netlifys 404 page? also just curious, what if you create a new nuxt project and try deploying that, does that work?

garrlkerOP•8mo ago

good afternoon! I tried both of those this morning to debug and the results are interesting making a new nuxt site from scratch and deploying worked just fine. Using it I was able to bisect that the problem has to be in this apps code or config I created a new error page and it is getting tripped on the initial load everytime It shows this error error caught during app initialization Error: Page not found: / So it looks like for some reason when loading this app, it can't properly grab the index.vue page component props.error.statusCode does equal 404 so it checks out when I build/generate locally however I don't get any of this, so I'm still a bit perplexed. I tried disabling all of my modules, but it has the same error so those shouldn't be affecting it

pyplacca•8mo ago

Do other pages work fine?

garrlkerOP•8mo ago

Yeah, they've been fine let me recheck real quick because I've made a lot of changes today ok yeah theyre still working fine hmmm... I think I might have possible error I've found

pyplacca•8mo ago

Oh great

garrlkerOP•8mo ago

import { default as Gamexuipm2l0gJMeta } from "/opt/build/repo/pages/Game.vue?macro=true";
import { default as IndexC91yTzrmj0Meta } from "/opt/build/repo/pages/Index.vue?macro=true";
import { default as Login9fL5qKeXxUMeta } from "/opt/build/repo/pages/Login.vue?macro=true";
import { default as Settings44RVCoeUU7Meta } from "/opt/build/repo/pages/Settings.vue?macro=true";
import { default as sign_45up3Rqnj2isW5Meta } from "/opt/build/repo/pages/sign-up.vue?macro=true";
import { default as sliderx1UDWfA5PBMeta } from "/opt/build/repo/pages/slider.vue?macro=true";
import { default as TempAploRlfQ0IMeta } from "/opt/build/repo/pages/Temp.vue?macro=true";
export default [
  {
    name: Gamexuipm2l0gJMeta?.name ?? "Game",
    path: Gamexuipm2l0gJMeta?.path ?? "/Game",
    meta: Gamexuipm2l0gJMeta || {},
    alias: Gamexuipm2l0gJMeta?.alias || [],
    redirect: Gamexuipm2l0gJMeta?.redirect,
    component: () => import("/opt/build/repo/pages/Game.vue").then(m => m.default || m)
  },
  {
    name: IndexC91yTzrmj0Meta?.name ?? "Index",
    path: IndexC91yTzrmj0Meta?.path ?? "/Index",
    meta: IndexC91yTzrmj0Meta || {},
    alias: IndexC91yTzrmj0Meta?.alias || [],
    redirect: IndexC91yTzrmj0Meta?.redirect,
    component: () => import("/opt/build/repo/pages/Index.vue").then(m => m.default || m)
  },
  {
    name: Login9fL5qKeXxUMeta?.name ?? "Login",
    path: Login9fL5qKeXxUMeta?.path ?? "/Login",
    meta: Login9fL5qKeXxUMeta || {},
    alias: Login9fL5qKeXxUMeta?.alias || [],
    redirect: Login9fL5qKeXxUMeta?.redirect,
    component: () => import("/opt/build/repo/pages/Login.vue").then(m => m.default || m)
  },
  {
    name: Settings44RVCoeUU7Meta?.name ?? "Settings",
    path: Settings44RVCoeUU7Meta?.path ?? "/Settings",
    meta: Settings44RVCoeUU7Meta || {},
    alias: Settings44RVCoeUU7Meta?.alias || [],
    redirect: Settings44RVCoeUU7Meta?.redirect,
    component: () => import("/opt/build/repo/pages/Settings.vue").then(m => m.default || m)
  },
  {
    name: sign_45up3Rqnj2isW5Meta?.name ?? "sign-up",
    path: sign_45up3Rqnj2isW5Meta?.path ?? "/sign-up",
    meta: sign_45up3Rqnj2isW5Meta || {},
    alias: sign_45up3Rqnj2isW5Meta?.alias || [],
    redirect: sign_45up3Rqnj2isW5Meta?.redirect,
    component: () => import("/opt/build/repo/pages/sign-up.vue").then(m => m.default || m)
  },
  {
    name: sliderx1UDWfA5PBMeta?.name ?? "slider",
    path: sliderx1UDWfA5PBMeta?.path ?? "/slider",
    meta: sliderx1UDWfA5PBMeta || {},
    alias: sliderx1UDWfA5PBMeta?.alias || [],
    redirect: sliderx1UDWfA5PBMeta?.redirect,
    component: () => import("/opt/build/repo/pages/slider.vue").then(m => m.default || m)
  },
  {
    name: TempAploRlfQ0IMeta?.name ?? "Temp",
    path: TempAploRlfQ0IMeta?.path ?? "/Temp",
    meta: TempAploRlfQ0IMeta || {},
    alias: TempAploRlfQ0IMeta?.alias || [],
    redirect: TempAploRlfQ0IMeta?.redirect,
    component: () => import("/opt/build/repo/pages/Temp.vue").then(m => m.default || m)
  }
]

import { default as Gamexuipm2l0gJMeta } from "/opt/build/repo/pages/Game.vue?macro=true";
import { default as IndexC91yTzrmj0Meta } from "/opt/build/repo/pages/Index.vue?macro=true";
import { default as Login9fL5qKeXxUMeta } from "/opt/build/repo/pages/Login.vue?macro=true";
import { default as Settings44RVCoeUU7Meta } from "/opt/build/repo/pages/Settings.vue?macro=true";
import { default as sign_45up3Rqnj2isW5Meta } from "/opt/build/repo/pages/sign-up.vue?macro=true";
import { default as sliderx1UDWfA5PBMeta } from "/opt/build/repo/pages/slider.vue?macro=true";
import { default as TempAploRlfQ0IMeta } from "/opt/build/repo/pages/Temp.vue?macro=true";
export default [
  {
    name: Gamexuipm2l0gJMeta?.name ?? "Game",
    path: Gamexuipm2l0gJMeta?.path ?? "/Game",
    meta: Gamexuipm2l0gJMeta || {},
    alias: Gamexuipm2l0gJMeta?.alias || [],
    redirect: Gamexuipm2l0gJMeta?.redirect,
    component: () => import("/opt/build/repo/pages/Game.vue").then(m => m.default || m)
  },
  {
    name: IndexC91yTzrmj0Meta?.name ?? "Index",
    path: IndexC91yTzrmj0Meta?.path ?? "/Index",
    meta: IndexC91yTzrmj0Meta || {},
    alias: IndexC91yTzrmj0Meta?.alias || [],
    redirect: IndexC91yTzrmj0Meta?.redirect,
    component: () => import("/opt/build/repo/pages/Index.vue").then(m => m.default || m)
  },
  {
    name: Login9fL5qKeXxUMeta?.name ?? "Login",
    path: Login9fL5qKeXxUMeta?.path ?? "/Login",
    meta: Login9fL5qKeXxUMeta || {},
    alias: Login9fL5qKeXxUMeta?.alias || [],
    redirect: Login9fL5qKeXxUMeta?.redirect,
    component: () => import("/opt/build/repo/pages/Login.vue").then(m => m.default || m)
  },
  {
    name: Settings44RVCoeUU7Meta?.name ?? "Settings",
    path: Settings44RVCoeUU7Meta?.path ?? "/Settings",
    meta: Settings44RVCoeUU7Meta || {},
    alias: Settings44RVCoeUU7Meta?.alias || [],
    redirect: Settings44RVCoeUU7Meta?.redirect,
    component: () => import("/opt/build/repo/pages/Settings.vue").then(m => m.default || m)
  },
  {
    name: sign_45up3Rqnj2isW5Meta?.name ?? "sign-up",
    path: sign_45up3Rqnj2isW5Meta?.path ?? "/sign-up",
    meta: sign_45up3Rqnj2isW5Meta || {},
    alias: sign_45up3Rqnj2isW5Meta?.alias || [],
    redirect: sign_45up3Rqnj2isW5Meta?.redirect,
    component: () => import("/opt/build/repo/pages/sign-up.vue").then(m => m.default || m)
  },
  {
    name: sliderx1UDWfA5PBMeta?.name ?? "slider",
    path: sliderx1UDWfA5PBMeta?.path ?? "/slider",
    meta: sliderx1UDWfA5PBMeta || {},
    alias: sliderx1UDWfA5PBMeta?.alias || [],
    redirect: sliderx1UDWfA5PBMeta?.redirect,
    component: () => import("/opt/build/repo/pages/slider.vue").then(m => m.default || m)
  },
  {
    name: TempAploRlfQ0IMeta?.name ?? "Temp",
    path: TempAploRlfQ0IMeta?.path ?? "/Temp",
    meta: TempAploRlfQ0IMeta || {},
    alias: TempAploRlfQ0IMeta?.alias || [],
    redirect: TempAploRlfQ0IMeta?.redirect,
    component: () => import("/opt/build/repo/pages/Temp.vue").then(m => m.default || m)
  }
]

This is the routes file generated from Netlify All of the imports up top that have capitalized letters shouldn't I renamed them a few days back to all be lowercase Here's the deployed url btw if you wanna take a look: https://main--chirp-shot.netlify.app/ this could be nothing, but maybe the app loads, tries to import Index.vue instead of index.vue, it cannot be found, error happens?

pyplacca•8mo ago

Yeahh Could be

garrlkerOP•8mo ago

because if I set the error page to redirect to / on a 404 status, the page renders on the 2nd attempt

pyplacca•8mo ago

Nuxt pages are usually case insensitive, but I’m sure that might not be the case with the build

garrlkerOP•8mo ago

I still think I'm doing something wrong to have caused this though Just haven't figured it out yet

garrlkerOP•8mo ago

thats what I thought too

garrlkerOP•8mo ago

this is my pages dir

pyplacca•8mo ago

How recent is this?

garrlkerOP•8mo ago

it deployed like 5-10 minutes ago

pyplacca•8mo ago

How recent have you pushed changes for the index.vue file? Try a cache clear on Netlify and see if that works?

garrlkerOP•8mo ago

3 days ago same result unfortunately that was a good idea tho

pyplacca•8mo ago

Do you also use bun locally?

garrlkerOP•8mo ago

OMG I FIGURED IT OUT

garrlkerOP•8mo ago

pyplacca•8mo ago

😂

garrlkerOP•8mo ago

even though I renamed the file to index.vue locally, git still tracked it as Index.vue! omg!

pyplacca•8mo ago

What were odds! Lol

garrlkerOP•8mo ago

Apparently this is an easy situation to hit on macos because of how it's filesystem allows for File.bla and file.bla to coexist

pyplacca•8mo ago

Is it exclusive to MacOS? I think it’s possible in Windows too

garrlkerOP•8mo ago

May be, I'm not sure but I haven't used windows in almost 5 years now Can't believe this was it, but glad I figured it out Crazy bug, not on Nuxt or even Netlify. I'd almost like for Git to send a warning on every push telling me the internal filename isn't my local filename, but I won't bash it too hard

pyplacca•8mo ago

Use GitHub desktop

garrlkerOP•8mo ago

but muh CLI honestly, maybe this is a sign I should use a GUI lmao

pyplacca•8mo ago

Trust me. You’re never going to regret it I only use cli to install packages 😂💔

garrlkerOP•8mo ago

very fair! Thanks again for all your help @pyplacca and you as well @Room 208 !

pyplacca•8mo ago

Glad your headache is over

Solution

garrlker•8mo ago

Incase anyone finds this thread in the future Do your Nuxt pages or index return 404 even though they are working in your local? If so, did you rename any page files, specifically index.vue, from Page.vue to page.vue at any point? Double check that git caught the case change If git did not catch the case change, when the CI runs git pull your page files will still have the old naming, which won't match what you're doing in your NuxtLink to props git mv and git mv --force will be your tools to rename and ensure git will pull them back down correctly in Netlify or Cloudflare CI Here's a SO post talking about git filenames and case sensitivity: https://stackoverflow.com/a/24979063 https://stackoverflow.com/a/37470090

Stack Overflow

How do you change the capitalization of filenames in Git?

Stack Overflow

git fails to detect renaming

One branch (refactoringBranch) had a complete directory restructure. Files were moved chaosly, but the content was preserved. I tried to merge: git merge --no-ff -Xrename-threshold=15 -Xpatience -

garrlkerOP•8mo ago

omg meee tooo. Source maps saved the bacon here

pyplacca•8mo ago

Mark it as the answer to the thread

garrlkerOP•8mo ago

hmm how do I do that?

pyplacca•8mo ago

I think you add a ✅ to the comment Like a reaction

garrlkerOP•8mo ago

ah, gotcha

pyplacca•8mo ago

@garrlker, here’s how to do it instead: 1. Long press the comment 2. Go to Apps 3. Then select “Mark as Solution”

Room 208•8mo ago

Yoo glad you figured it out!

garrlkerOP•8mo ago

Ty!

Room 208•8mo ago

Those small lil things are always tricky!

pyplacca•8mo ago

Yeah 😅

garrlkerOP•8mo ago

They are! I really really appreciate both of y'all's help ❤️ If either of y'all have a kofi or something please send it and I'll buy yall a coffee

pyplacca•8mo ago

Thanks mate. Unfortunately, I don’t, but it was a pleasure helping out 😊

Room 208•8mo ago

Haha nah, appreciate you though! Just trying to be helpful / join a community

Gaming

Programming

Nuxt / renders index.vue locally but when deployed via Netlify returns 404