Routing issue in prod deploy only (Form Submission)

Hey folks! I am working on deploying my first vite-plugin-ssr based site for a customer.

I am using netlify but having some trouble with routing on form submissions (via action attr). A /success route exists and if I type the route in the url manually it properly loads the page (default server side routing in play). If I use the submit button however, the url updates to /success route but what is delivered is a 404. When serving prod locally this works like expected but for some reason on netlify it is not. Does anyone have experience successfully deploying to netlify (with forms)?

Site is: https://delicate-baklava-dc9253.netlify.app/

Navigate to get in touch and submit the form to repro.

HI @earlAchromatic

Because it doesn’t really exist. There isn’t a success.html file in the deploy, that page is served via SSR. The action needs to point to a path that exists (non-SSR.)

Hi @coelmay , thanks for the reply.

Success.html is pre-rendered though so it does exist. Its in success/index.html.

if you just go to Engagement Gene it will show the page. Netlify isn’t SSRing so it wouldn’t load if it wasn’t prerendered.

Doesn’t matter if there is content served on the path or not

  • File exists, file gets served.
  • File doesn’t exists, file is SSRed, file gets served.

Wait so Netlify SSR’s on the fly on request? TIL I guess. I thought that was on demand builders only though, not default behavior. So in my build step the success/index.html is prerendered so it should exist already when I route to it though, so I still don’t understand the behavior that I am seeing.

Also, I followed these instructions Form troubleshooting tips | Netlify Docs and the link works but action does not.

Anything SSR is on-the-fly.

Can you share the repository?

It’s private but I added you as read only on GH so you can take a peek.

As the repository is not public, I can’t help you.

Hey @earlAchromatic,

We’ve responded to this in the helpdesk. For context, this is the problem:

As far as I can see, it’s your site’s JavaScript doing something wrong. As soon as I disabled JavaScript for your site, I can see everything work fine.

For example, if I go to: view-source:https://delicate-baklava-dc9253.netlify.app/ (in Chrome), I can see that, the HTML file does have the hidden input that Netlify adds automatically:

<form action='/success' class data-v-6d1dfd65 data-v-726c335a method='POST' name='contact'><input type='hidden' name='form-name' value='contact' />

However, when I load your site with JavaScript enabled:

…that input is removed.

If I load your site with JavaScript disabled:

the input is preserved.

This is not something Netlify can control and you need to check what is causing this. You might need to include the hidden input manually.

To follow up:

Manually adding the hidden input did indeed fix the problem. I realized that Netlify must add in the hidden input after build and my code is hydrating the client and thus eliminating the hidden input. Including it in my app code allows it to be included upon hydration and forms work.

Thanks!