Getting 404 error, when adding a plugin for example

[nikolaihe]

Hi there,

I am getting a strange behaviour when working with composables and plugins (maybe also other things, but I have confirmed that this is the case for these at least).

When I add a new plugin for example, all my pages, which previously worked are still loading, but then instantly update to a 404. Restarting the application doesn't fix it, nor does deleting the .nuxt folder. The only way to fix it is to make a template change in any of the vue pages. Very strange..

See attached a video of the issue, showcasing that the page still loads, as well as that the composable and plugin are executed and working, but also the strange instant 404 redirect. You can also see the console for the detailed errors.

For some more details, everything was working, then I did the following changes:

1. Created a new plugin (plugins/my-plugin.ts)

export default defineNuxtPlugin((nuxtApp) => {
    return {
        provide: {
            sayHello: (msg: string) => console.log(msg),
        }
    }
});

2. Used the new plugin on the index.vue page

<template>
  <div>
    <h1>Hello Nuxt 3</h1>
    <icons-alert />
  </div>
</template>

<script setup lang="ts">
const {sayHello} = useUtils();
const {$sayHello} = useNuxtApp();
sayHello();
$sayHello("ASDFASFASFASFASDFASDFASFASDFASDFASDF");
</script>

Sometimes the 404 stops randomly or after a few random changes and restarts of the app. Mostly it instantly is fixed by changing the template section of any page.

I am using the very latest version of Nuxt3 and the project is very much bare bone.

Hope anyone can shed some light into this for me, so I understand better what's going on and if this is a bug or something that I am doing wrong on my side.

nuxt3-404-issue.mov

[AloisSeckar]

2. Used the new plugin on the index.vue page

Not sure if this is your issue, but it should be /pages/index.vue to make it work. Or alternatively, if you don't need routing to multiple pages, you may only have a file named /app.vue in root dir and put your logic there.

[nikolaihe]

Don't believe that is the issue. My app.vue file is setup to just use the layout and pages, see here:

<template>
  <nuxt-layout>
    <nuxt-page />
  </nuxt-layout>
</template>
<script setup lang="ts">
</script>

The folder structure is as follows:

I also just tried without the app.vue file in place, and getting the exact same issue where the actual page is rendering fine, but then instantly changes to the 404 error.

[AloisSeckar]

Hm, this looks alright. Can you share the content of your nuxt.config.ts? Maybe there is something that gives some insight on what's going on.

[nikolaihe]

This is my nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
import { resolve } from 'path';
export default defineNuxtConfig({
  devtools: { enabled: true },
  alias: {
    '@': resolve(__dirname, '/')
  },
  css: ['~/assets/main.scss'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

[AloisSeckar]

alias: {
  '@': resolve(__dirname, '/')
},

this looks little suspicious to me, because it doesn't seem to add value to default configuration ('@' already points into the directory where Nuxt app resides)...but it is just a wild guess

[nikolaihe]

I have a few Nuxt3 projects that I have recently created, all running on port 3000 - not sure if that could have to do with it. I decided to start the one I am currently working on on another port and have done some testing - so far I haven't been able to reproduce the issue. Not sure how this could cause it, but thought worth mentioning, in case that could causing some issues!?

[AloisSeckar]

Do you set the port explicitly in config? By default Nuxt is able to detect occupied port and start dev server on another (3001, 3002, etc.)

But I guess you couldn't end up running two Nuxt instances on the same port at the same time so this shouldn't be the issue.

[nikolaihe]

Yeah it's strange. Initially I haven't set the port. But after specifying a new port in the env vars, I have not yet experience the issue again, certainly a bit strange.

[nikolaihe]

Just removed the config form the env vars, so it defaults back to 3000 and same issue (as shown in the video). I will see what a machine restart will do to this behaviour. Will update here shortly.

[nikolaihe]

After machine restart same issue. Port 3000 has those issues (video) and setting the port to 3030, app works fine.

[nikolaihe]

I can always reproduce the (404 instant redirect issue) when switching back to port 3000 and it is working on port 3030 without the issue. I also check the system for processes running on that port and no difference.. Very strange.

[nikolaihe]

Ok, after removing everything from the project to try and isolate where the issue is coming from, and still getting the issue for this particular project on port 3000 (btw, other nuxt projects running on the same port in the same browser and also under localhost, where NOT having the problem). But anyways, after stripping it all down to just one app.vue file and still getting the error, I (finally, and should have done that way earlier) cleared all browser data and tada, that was causing it to do the strange 404 redirect.

FYI @AloisSeckar.

What I don't understand is how this could have been caused by the browser though!? Any ideas?