Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Public assets 404 Not Found with Nitro publicAssets maxAge is set. #26517

Open
ploca14 opened this issue Mar 27, 2024 · 10 comments · May be fixed by #26679
Open

Public assets 404 Not Found with Nitro publicAssets maxAge is set. #26517

ploca14 opened this issue Mar 27, 2024 · 10 comments · May be fixed by #26679

Comments

@ploca14
Copy link

ploca14 commented Mar 27, 2024

Environment

  • Operating System: Linux
  • Node Version: v18.18.0
  • Nuxt Version: 3.11.1
  • CLI Version: 3.11.1
  • Nitro Version: 2.9.5
  • Package Manager: npm@10.2.3
  • Builder: -
  • User Config: devtools, nitro
  • Runtime Modules: -
  • Build Modules: -

Reproduction

https://stackblitz.com/edit/github-kjtmai?file=nuxt.config.ts

Describe the bug

When attempting to set Cache-Control headers for assets using the maxAge option using the nitro.publicAssets option, causes the assets to return a 404 error.

Additional context

No response

Logs

No response

Copy link

stackblitz bot commented Mar 27, 2024

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

@danielroe
Copy link
Member

Would you see if you can reproduce this in pure Nitro (reproduction sandbox), and if so, raise there? 🙏

@userquin
Copy link
Member

userquin commented Apr 6, 2024

dir seems to be not resolved (Nuxt aliases don't work, check Elk commit below), we need a resolver, here a working example (linked SB reproduction fork ):
https://stackblitz.com/edit/github-kjtmai-mrrd7c?file=nuxt.config.ts

Can be checked with Elk in dev server, check this commit elk-zone/elk@932af07 .

Screenshot using the playground in my Nuxt local clone:

imagen

@userquin
Copy link
Member

userquin commented Apr 6, 2024

The problem seems to be also in nuxt, it is ignoring the aliases in layers:

It seems server routes with same problem.

@userquin
Copy link
Member

userquin commented Apr 6, 2024

publicAssets not being resolved, only public dirs

@userquin
Copy link
Member

userquin commented Apr 6, 2024

I'm preparing a PR for publicAssets, including also Nuxt alias:

imagen

@h4ckthepl4net
Copy link

As a temporary solution I would suggest to use this config only for production builds, as stated in this stackoverflow answer, using nuxt config environment separation, and configuring nitro under $production key in nuxt.config.ts

@Jessuhh
Copy link

Jessuhh commented Jun 3, 2024

Hi @h4ckthepl4net, your temporary solution makes no difference for me. Both in development and production the assets return a 404 html page instead of the asset. Would you happen to know any other fixes for this issue?

@h4ckthepl4net
Copy link

h4ckthepl4net commented Jun 3, 2024

@Jessuhh here is my nitro config

export default {
    publicAssets: [
        {
            baseURL: "video",
            dir: "public/video",
            maxAge: 60 * 60 * 24 * 365,
        },
        {
            baseURL: "images",
            dir: "public/images",
            maxAge: 60 * 60 * 24 * 365,
        },
        {
            baseURL: "animations",
            dir: "public/animations",
            maxAge: 60 * 60 * 24 * 365,
        },
    ],
    compressPublicAssets: {
        brotli: true,
        gzip: true,
    },
};

which is imported in nuxt.config.ts

import i18nConfig from "./configs/modules/i18n/i18n.config"
import siteConfig from "./configs/modules/seo/site.config";
import seoConfig from "./configs/modules/seo/seo.config";
import robotsConfig from "./configs/modules/seo/robots.config";
import deviceConfig from "./configs/modules/device/device.config";
import colorModeConfig from "./configs/modules/color-mode/color-mode.config";
import tailwindConfig from "./configs/modules/tailwind/tailwind.config";
import runtimeConfig from "./configs/runtime.config";
import swiperConfig from "./configs/modules/swiper/swiper.config";
import sitemapConfig from "./configs/modules/seo/sitemap.config";
import imageConfig from "./configs/modules/image/image.config";
import nitroConfig from "./configs/nitro/nitro.prod.config";

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    // other nuxt configuration
    devtools: { enabled: true },

    $production: {
        nitro: nitroConfig,
    },

    app: {
        layoutTransition: {
            name: "page",
            mode: "out-in",
        },
    },

    telemetry: false,

    modules: [
        "@nuxtjs/seo",
        ['@nuxtjs/i18n', i18nConfig],
        ["@nuxtjs/device", deviceConfig],
        ["@nuxtjs/color-mode", colorModeConfig],
        ["@nuxtjs/tailwindcss", tailwindConfig],
        "@nuxt/fonts",
        "@nuxt/image",
        "nuxt-svgo",
        "@formkit/auto-animate/nuxt",
        "nuxt-swiper",
        "@nuxt/scripts"
    ],

    css: [
        "./assets/css/main.scss",
    ],

    // modules static configuration
    site: siteConfig,
    sitemap: sitemapConfig,
    seo: seoConfig,
    robots: robotsConfig,
    swiper: swiperConfig,
    image: imageConfig,

    // runtime configuration
    runtimeConfig,
})

and it just works fine

@Jessuhh
Copy link

Jessuhh commented Jun 4, 2024

Thank you! I made the rookie mistake of messing up my imports by pointing to public/wasm/ instead of /wasm/. The nitro config works for me in development as well as in production, so your solution wasn't needed for me. Again, thanks for your time!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants