Vite React app with react router routes is having 404 in vercel - Stack Overflow

admin管理员组

文章数量:1401199

I know the problem, but not the solution. The /app directory is the problem. How do I fix it? In vite.config? In Vercel? React-router-dom?

Update: I've setup a working sample monorepo, but feel free to read about it below.

vercel.json in app dir

This is a 404 for all: domain and domain/my/paths

project-root/
└── app
   ├── vercel.json
   ├── index.html
   ├── package.json
   └── src
       └── ...frontend files

The vercel.json as prescribed

{
  "rewrites": [
      {"source": "/(.*)", "destination": "/"}
  ]
}

the fix

After many trials, this is the winner vercel.json. I really wanted the vercel.json outside the app dir.

File structure

project-root/
├── app
│   ├── index.html
│   ├── package.json
│   └── src
│       └── ...frontend files
└── vercel.json

vercel.json

{
  "builds": [
    {
      "src": "app/package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "dist"
      }
    }
  ],
  "rewrites": [
    { "source": "/(.*)", "destination": "/app/$1" },
    { "source": "/app/(.*)", "destination": "/app/index.html" }
  ]
}

I'll explain. This app does not use next.js. Not. It's a vite react app with react-router-dom routes. The build creates a dist directory. setting up "distDir": "app/dist" resulted in an error for Vercel, but it did build. There was an error displayed in the Build Logs: it could not find the dist, so removing the app/ did the trick, I tested.

The rewrites. Why isn't dist part of the path? I found the answer by accident. Vercel doesn't have one. In the Vercel project, you will see three buttons in the upper right: Build logs, Runtime logs, Instant Rollback. The Build logs display three rows: Build Logs, Deployment Summary and Assign.... Inside Deployment Summary there is a subsection: Static Assets. If you click and open Static Assets you will find a list of your built files, and note, there is no dist.

/app/_redirects
/app/android-chrome-192x192.png
/app/android-chrome-512x512.png
/app/apple-touch-icon.png
...

So that did it for me. Oh, and my routes work. Good luck to you.

Things I've looked at

I've looked at these threads, and I am still stuck. Any help would be appreciated.

• React Redirect Works Locally but 404s on Vercel
• React Router Works Locally, but Produces a Blank Page After Deployment on Vercel: How to Troubleshoot? Particularly the route with dynamic parameters
• react-router-dom | path="*" doesn't work on vercel

本文标签： Vite React app with react router routes is having 404 in vercelStack Overflow