Vite + React app MIME error when reloading the page

A MIME type error when reloading a page in a Vite + React app often occurs because the server is not correctly configured to handle the routing. This issue is common with single-page applications (SPAs) like React apps where client-side routing is used. When you reload the page on a route other than the root, the server doesn’t know how to handle it, leading to MIME type errors or 404 errors.

Here are some solutions to fix this issue:

1. Configure the Vite Development Server

If you’re running the app locally with Vite’s development server, you can add a base configuration in vite.config.js to help the server resolve paths correctly.

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: '/', // Ensure this points to the correct base
  server: {
    open: true,
    // Configure server to return index.html for unknown routes
    hmr: true,
  },
});

2. Configure the Server for Production

If you’ve deployed the app and encounter this error in production, ensure your server is set up to handle client-side routing by always serving index.html.

For example, in:

• Nginx:

  server {
      listen 80;
      server_name yourdomain.com;

      location / {
          root /path/to/your/build;
          try_files $uri /index.html;
      }
  }

• Apache:

Add a .htaccess file to the build folder:

  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
  </IfModule>

• Express (Node.js):

If you’re using Node.js with Express to serve the app, add the following middleware to serve index.html for any unknown routes:

  const express = require('express');
  const path = require('path');
  const app = express();

  app.use(express.static(path.join(__dirname, 'dist')));

  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
  });

  const PORT = process.env.PORT || 3000;
  app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

3. Add base Option in Vite for Non-root Deployments

If your app is deployed in a subdirectory (like https://example.com/app), set the base option in vite.config.js:

// vite.config.js
export default defineConfig({
  base: '/app/', // Adjust according to your deployment path
  plugins: [react()],
});

4. Use react-router-dom’s BrowserRouter

If you are using react-router-dom, ensure that you’re using BrowserRouter (not HashRouter) for client-side routing. BrowserRouter uses the HTML5 history API, which Vite supports well.

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      {/* your app routes here */}
    </BrowserRouter>
  );
}

export default App;

Summary

These configurations should resolve the MIME type issue by ensuring the server serves index.html for unknown routes, enabling Vite and your app's router to handle navigation properly on page reloads.