N
Nuxt•5mo ago
garrlker

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:
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?...
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
Room 208•5mo ago
did it build successfully on netlify? on netlify is your base directory set as / build command: nuxt build publish directory: dist
garrlker
garrlker•5mo ago
yes it successfully built
garrlker
garrlker•5mo ago
No description
garrlker
garrlker•5mo ago
here are my settings trying nuxt build to see if that fixes it same result :/
Room 208
Room 208•5mo 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
Room 208•5mo ago
try this maybe 
_redirects
_redirects
file in public folder with 
/* /index.html 200
/* /index.html 200
inside
garrlker
garrlker•5mo 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
Room 208•5mo 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?
garrlker
garrlker•5mo 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
pyplacca•5mo ago
Do other pages work fine?
garrlker
garrlker•5mo 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
pyplacca•5mo ago
Oh great
garrlker
garrlker•5mo 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
pyplacca•5mo ago
Yeahh Could be
garrlker
garrlker•5mo ago
because if I set the error page to redirect to / on a 404 status, the page renders on the 2nd attempt
Want results from more Discord servers?
Add your server