Netlify and React Vite: Netlify says "Page not found" upon reloading in Vite and React site

Question

I have the site built in React JS where I am using Vite as a JS Bundler. The problem is, when I deployed the site on Netlify and when reloading the page it says "Page not found".

I tried adding changing vite.config.jsfile.

import { defineConfig } from "vite";
import { resolve } from "path";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
      },
    },
  },
  plugins: [react()],
});

I also added .redirects file.

Please provide a solution for this, I see this as a common issue but it hasn't been addressed much.

Hirst

Answer 1

I see this as a common issue but it hasn't been addressed much.

Addressing this issue can only happen through documentation, which unfortunately if not referred to, cannot be helped.

Without seeing your site and the description of this being a common issue, I can only "assume" you're talking about the 404 on refresh problem, just like the another similar question posted about yesterday: Routes not working properly in React using Vite (ON BUILD)

The solution is documented on React docs (well, Create React App, but valid in this case too): https://create-react-app.dev/docs/deployment/#netlify

You need to create a file, public/_redirects with the content:

/* /index.html 200

You already mention you've done that, but unless it follows the exact placement and syntax as above, it won't work.

Publea

Perfect, Thanks Alot, It worked. I was not keeping the _redirects file in the public folder and the content of it was like: /* /index.html 200, not /* /index.html 200. I copied the code from source and it contained spaces, I dont know why, I removed the space and it worked like gem. – Hirst

Answer 2

For Netlify

To set up a _redirects file in your public folder, follow these steps. Assuming you're using React with Vite:

1. Navigate to your project's public folder.

2. Create a new file named _redirects.

3. Paste the following code into the _redirects file:

   /* /index.html 200

For Vercel

Create a file named vercel.json in the root folder of your project.

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

Same issue: Click Here

Faust