optimistic-gold

When deploying on vercel, getting 404 when visiting a lazy loaded page after hard reload+cache clear

I am doing lazy loading with createLazyFileRoute and index.lazy.tsx strategy. When visiting a page that's lazy loaded (for eg. /dashboard) I get 404 not found and then I have to visit / (the only route that's not lazy loaded) and then visit other routes. This only happens when deploying on vercel, when building locally, it works fine.

6 Replies

eastern-cyan•2y ago

does not sound like a lazy load problem rather you need some server side rewrite active that will deliver the index.html regardless which path is requested

eastern-cyan•2y ago

Google revealed this https://vercel.com/docs/projects/project-configuration#legacy-spa-fallback

Configuring Projects with vercel.json

Learn how to use vercel.json to configure and override the default behavior of Vercel from within your project.

eastern-cyan•2y ago

probably a newer way exists since it is called "legacy" but should get you started in the right direction

optimistic-goldOP•2y ago

that was it, thanks!

unwilling-turquoise•16mo ago

did you solve the problem? It also get a similar problem

conscious-sapphire•16mo ago

I am sure you might need to provide this for Vercel deploys: //vercel.json

{
  "regions": ["fra1"],
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/"
    }
  ],
  "headers": [
    {
      "source": "/favicon.ico",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=3600"
        }
      ]
    },
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31556952, immutable"
        }
      ]
    }
  ]
}

{
  "regions": ["fra1"],
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/"
    }
  ],
  "headers": [
    {
      "source": "/favicon.ico",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=3600"
        }
      ]
    },
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31556952, immutable"
        }
      ]
    }
  ]
}

//vercel.local.json

{}

{}

I am not sure if there is a better way of doing it

Gaming

Programming

When deploying on vercel, getting 404 when visiting a lazy loaded page after hard reload+cache clear

Did you find this page helpful?