Dynamic route returns 404 in production

sean · 2024-09-18T19:12:42.254Z

Hi, I have a simple nuxtjs website and made a dynamic loaded page /bot/botId fetchs the bot and builds a ui based on that. Now when I run `npm run preview` after build and try it out my browser gets 404 at these routes in the network tab. I saw this https://github.com/nuxt/nuxt/issues/28692 issue on github BUT how would I do that in the preview mode? Also when I host it on github pages I have the same issue. I cannot "prerender" it since there are over 44k Discord bots on Discord :NM3_Eyes: I use NuxtLayout and NuxtPage. My file path is `/pages/bot/[bot].vue` With this content: ```html Bot BotBotBotBotBotBotBotBotBotBotBot ``` In dev mode I dont even get any warning and it works how I expect it.

S

seanOP•9/18/24, 7:14 PM

My nuxtjs config looks like this right now:

import utwm from 'unplugin-tailwindcss-mangle/vite';

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    app: {
        head: {
            htmlAttrs: {
                lang: 'en',
            },
            charset: 'utf-8',
            viewport: 'width=device-width, initial-scale=1',
            title: 'XXXXXXX',
            meta: [
                {
                    name: 'description',
                    content: 'XXXXXXXXX'
                },
                {
                    property: 'og:image',
                    content: '/logo.svg'
                },
                {
                    name: 'twitter:card',
                    content: 'summary_large_image'
                },
                {
                    name: 'twitter:image',
                    content: '/logo.svg'
                },
            ],
        }
    },
    routeRules: {
        '/': {prerender: true, isr: 3600},
        '/bot/**': {ssr: true},
        '/bot': {redirect: '/'},
    },
    compatibilityDate: '2024-04-03',
    devtools: {enabled: true},
    modules: ['@nuxt/image', '@nuxtjs/robots', '@nuxtjs/tailwindcss', '@nuxtjs/plausible', '@pinia/nuxt', 'floating-vue/nuxt'],
    css: [
        '@/assets/css/main.css',
    ],
    plausible: {
        apiHost: 'https://xxxxxx',
        autoOutboundTracking: true,
    },
    pinia: {
        autoImports: ['defineStore', 'acceptHMRUpdate'],
    },
    vite: {
        build: {
            sourcemap: false
        },
        plugins: [
            utwm(),
        ],
    },
})

import utwm from 'unplugin-tailwindcss-mangle/vite';

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    app: {
        head: {
            htmlAttrs: {
                lang: 'en',
            },
            charset: 'utf-8',
            viewport: 'width=device-width, initial-scale=1',
            title: 'XXXXXXX',
            meta: [
                {
                    name: 'description',
                    content: 'XXXXXXXXX'
                },
                {
                    property: 'og:image',
                    content: '/logo.svg'
                },
                {
                    name: 'twitter:card',
                    content: 'summary_large_image'
                },
                {
                    name: 'twitter:image',
                    content: '/logo.svg'
                },
            ],
        }
    },
    routeRules: {
        '/': {prerender: true, isr: 3600},
        '/bot/**': {ssr: true},
        '/bot': {redirect: '/'},
    },
    compatibilityDate: '2024-04-03',
    devtools: {enabled: true},
    modules: ['@nuxt/image', '@nuxtjs/robots', '@nuxtjs/tailwindcss', '@nuxtjs/plausible', '@pinia/nuxt', 'floating-vue/nuxt'],
    css: [
        '@/assets/css/main.css',
    ],
    plausible: {
        apiHost: 'https://xxxxxx',
        autoOutboundTracking: true,
    },
    pinia: {
        autoImports: ['defineStore', 'acceptHMRUpdate'],
    },
    vite: {
        build: {
            sourcemap: false
        },
        plugins: [
            utwm(),
        ],
    },
})

import utwm from 'unplugin-tailwindcss-mangle/vite';

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    app: {
        head: {
            htmlAttrs: {
                lang: 'en',
            },
            charset: 'utf-8',
            viewport: 'width=device-width, initial-scale=1',
            title: 'XXXXXXX',
            meta: [
                {
                    name: 'description',
                    content: 'XXXXXXXXX'
                },
                {
                    property: 'og:image',
                    content: '/logo.svg'
                },
                {
                    name: 'twitter:card',
                    content: 'summary_large_image'
                },
                {
                    name: 'twitter:image',
                    content: '/logo.svg'
                },
            ],
        }
    },
    routeRules: {
        '/': {prerender: true, isr: 3600},
        '/bot/**': {ssr: true},
        '/bot': {redirect: '/'},
    },
    compatibilityDate: '2024-04-03',
    devtools: {enabled: true},
    modules: ['@nuxt/image', '@nuxtjs/robots', '@nuxtjs/tailwindcss', '@nuxtjs/plausible', '@pinia/nuxt', 'floating-vue/nuxt'],
    css: [
        '@/assets/css/main.css',
    ],
    plausible: {
        apiHost: 'https://xxxxxx',
        autoOutboundTracking: true,
    },
    pinia: {
        autoImports: ['defineStore', 'acceptHMRUpdate'],
    },
    vite: {
        build: {
            sourcemap: false
        },
        plugins: [
            utwm(),
        ],
    },
})

import utwm from 'unplugin-tailwindcss-mangle/vite';

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    app: {
        head: {
            htmlAttrs: {
                lang: 'en',
            },
            charset: 'utf-8',
            viewport: 'width=device-width, initial-scale=1',
            title: 'XXXXXXX',
            meta: [
                {
                    name: 'description',
                    content: 'XXXXXXXXX'
                },
                {
                    property: 'og:image',
                    content: '/logo.svg'
                },
                {
                    name: 'twitter:card',
                    content: 'summary_large_image'
                },
                {
                    name: 'twitter:image',
                    content: '/logo.svg'
                },
            ],
        }
    },
    routeRules: {
        '/': {prerender: true, isr: 3600},
        '/bot/**': {ssr: true},
        '/bot': {redirect: '/'},
    },
    compatibilityDate: '2024-04-03',
    devtools: {enabled: true},
    modules: ['@nuxt/image', '@nuxtjs/robots', '@nuxtjs/tailwindcss', '@nuxtjs/plausible', '@pinia/nuxt', 'floating-vue/nuxt'],
    css: [
        '@/assets/css/main.css',
    ],
    plausible: {
        apiHost: 'https://xxxxxx',
        autoOutboundTracking: true,
    },
    pinia: {
        autoImports: ['defineStore', 'acceptHMRUpdate'],
    },
    vite: {
        build: {
            sourcemap: false
        },
        plugins: [
            utwm(),
        ],
    },
})

S

seanOP•9/20/24, 10:05 AM

Still having this issue

S

seanOP•9/30/24, 7:50 PM

Still having this issue

S

seanOP•9/30/24, 8:19 PM

Found the actually issue

nuxt build --preset github_pages

nuxt build --preset github_pages

nuxt build --preset github_pages

nuxt build --preset github_pages

Dynamic route returns 404 in production

Similar Threads

Similar Threads

Similar Threads