Nuxt.js: [Help needed] Page not found "/" route

[DougHayward]

First off, sorry if this is in the wrong place. I tried StackOverflow first but got no interest.
I'm trying to set up a VueJS app using Nuxt for server-side rendering. However, after deployment to my server the index.vue is returning a 404 Page not found error.

This doesn't happen when running on my development machine, and still happens even if run in Development mode on my server.

All other routes work, and getting to the index route from within the app itself works fine. It just doesn't load when refreshed. Eg:

http://myapp.com/ Doesn't work

http://myapp.com/login Works fine

My pages folder currently looks like this:

- pages
-- index.vue
-- login.vue

I have nothing fancy set up within my nuxt.config file and have pretty much the same setup as is described in the Auth0 example

On my server I'm running nuxt with the command pm2 start npm --name "my-app" -- start Which runs fine without any errors, and I have the following .htaccess config:

RewriteCond %{HTTP_HOST} ^my-app\.com$ [OR]
RewriteRule ^(.*) "http\:\/\/127\.0\.0\.1\:3000\/$1" [P,L]

This is the error screen I get:

The page itself is very basic at the moment, it did have far more on it, however, I've cut it down to the following trying to debug this issue:

<template>
    <v-container grid-list-md>
       <v-layout row wrap>
           <h1>Test index, trying to fix the 404</h1>
           <h2>Hello, {{ loggedUser ? loggedUser : 'friend' }}!</h2>
       </v-layout>
   </v-container>
</template>

<script>
 import { mapGetters } from 'vuex'

 export default {
   computed: mapGetters([
     'isAuthenticated',
     'loggedUser'
   ])
 }
</script>

_{This question is available on Nuxt.js community (#c2284)}

[Atinux]

Hi @BonnieDoug

Does it work if you don't start your server with pm2 but directly with npm start?

[DougHayward]

Hi @Atinux .
No, same issue. Tried running it in dev mode (yarn run dev) with the same result, was hoping for a more helpful error at least, but get the exact same thing.

If it's OK to direct message you I will send you the URL to see it in action, I can't make the location too public though as there a few security holes I need to fill before I risk that.

[Cogitoergo]

@Atinux ,

I could back this up, has nothing to do with PM2.

It happens randomly, sometimes I'm just developing with npm run dev and all of a sudden I'm getting like 20 { statusCode: 404, message: 'This page could not be found' } errors, then the open tab freezes. Sometimes I get some errors in console, like "Loading chunk 2 failed" and the Server-side/Client-side Nodes missmatch one.

[Atinux]

It's really weird, we have a lot of tests to avoid this behaviour (and I don't see how it can happens randomly).

@BonnieDoug you can send me an email (see my GH profile) so I can help you a bit more.

[DougHayward]

@Atinux will do.
@Cogitoergo it's not random, it happens every time on live without fail. However, sometimes the side navbar does go missing.

[Cogitoergo]

For me its random. Sometimes just saving the file triggers it, sometimes refreshing the page a few times.

Tho I'm always having a console full of { statusCode: 404, message: 'This page could not be found' } on every page. I'm using nuxt-starter-template with vuetify a-la-carte, though only drawer and toolbar imported.

[DougHayward]

@Atinux thank you for pointing me at the .htaccess, I started playing with the settings and ended up with the following which works well (for now at least).

RewriteCond %{HTTP_HOST} ^my-app.com$
RewriteRule "(..(jpg|gif|png|svg|js|css|woff2))$" "http://127.0.0.1:3000/$1" [P,NC]
RewriteRule ^(.) "http\://127.0.0.1\:3000/$2" [P,L]

Now I just need to address the random breaking side-bar. It seems 1 in 5 reloads the side navigation doesn't render.

[RDMStreet]

@Cogitoergo, I have the same error

[DougHayward]

My fix, isn't a fix. It's started to cause issues with MIMETYPE & EventSource, and also disappearing elements, due to Server Side and Client side html discrepancies.

[Cogitoergo]

I finally found the root of the Page Not Found problem. It was coming from missing source maps. I was using Vuetify, but I didin't add it to my vendor array, this cause it to bug out. Either by disabling source maps completely or by adding Vuetify to vendors the problem is now gone.

[kkojot]

@Cogitoergo could you tell us how to add vuetify to the vendor array? I have exactly the same issue with nuxt+vuetify+a-la-carte and the missing source maps errors.

In my nuxt.config.js I have vendor: ['~/plugins/vuetify.js', 'vue-i18n'], and the vuetify plugin is set there by default. What should I do to solve the Page Not Found problem?

[husayt]

Try this in nuxt.config.js

 build: {
    extend(config, ctx) {
      if (ctx.isServer) {
        config.externals = [
          nodeExternals({
            whitelist: [/^vuetify/]
          })
        ]
      }
    },

So we can finally close this

[kkojot]

@husayt I have already set it and it doesn't help.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.