Vite plugin + Redirects

[sarink]

In order to deploy a SPA, usually you use

# netlify.toml
[[redirects]]
  from = "/*"
  to = "/index.html" 
  status = 200

While this works when deployed, it breaks local development. Loading the app over localhost returns a blank page and the console error:

Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

Removing the redirects line from netlify.toml makes local development (vite) work again, but then breaks in prod when you deploy.

What's the solution?

[serhalp]

@sarink Sorry for the delay here! Thank you for reporting.

It looks like we had some custom handling for this SPA case in netlify dev, but we haven't implemented this in the Vite plugin.

We'll prioritize this internally. Thanks again!

[sarink]

As a workaround...

# netlify.toml

[[redirects]]
  from = "/*"
  to = "/index.html" 
  status = 200

// vite.config.ts
export default defineConfig(({ mode }) => ({
  plugins: [
    netlify({
      redirects: {
        enabled: mode === 'production',
      },
    }),
  ]
}));

[staff0rd]

Much nicer than my mv netlify.toml.bak netlify.toml approach during CI deploy 🤣