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
Solution:Jump to 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 -
51 Replies
did it build successfully on netlify?
on netlify is your base directory set as /
build command: nuxt build
publish directory: dist
yes it successfully built
here are my settings
trying nuxt build to see if that fixes it
same result :/
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) ...
try this maybe
file in public folder with
inside
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 resultah 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?
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 itDo other pages work fine?
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
Oh great
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?Yeahh
Could be
because if I set the error page to redirect to
/
on a 404 status, the page renders on the 2nd attemptNuxt pages are usually case insensitive, but I’m sure that might not be the case with the build
I still think I'm doing something wrong to have caused this though
Just haven't figured it out yet
thats what I thought too
this is my pages dir
How recent is this?
it deployed like 5-10 minutes ago
How recent have you pushed changes for the index.vue file?
Try a cache clear on Netlify and see if that works?
3 days ago
same result unfortunately
that was a good idea tho
Do you also use bun locally?
OMG
I FIGURED IT OUT
😂
even though I renamed the file to index.vue locally, git still tracked it as Index.vue!
omg!
What were odds! Lol
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
Is it exclusive to MacOS? I think it’s possible in Windows too
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
Use GitHub desktop
but muh CLI
honestly, maybe this is a sign I should use a GUI lmao
Trust me. You’re never going to regret it
I only use cli to install packages 😂💔
very fair! Thanks again for all your help @pyplacca and you as well @Room 208 !
Glad your headache is over
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?
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/37470090Stack 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 -
omg meee tooo. Source maps saved the bacon here
Mark it as the answer to the thread
hmm
how do I do that?
I think you add a ✅ to the comment
Like a reaction
ah, gotcha
@garrlker, here’s how to do it instead:
1. Long press the comment
2. Go to Apps
3. Then select “Mark as Solution”
Yoo glad you figured it out!
Ty!
Those small lil things are always tricky!
Yeah 😅
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
Thanks mate. Unfortunately, I don’t, but it was a pleasure helping out 😊
Haha nah, appreciate you though! Just trying to be helpful / join a community