Cloudflare Developers•7mo ago

Debugging a deploy issue in a Remix + Vite Project

Hello, I have migrated my existing Remix CF Pages app that's been running for about a year to Vite, and the migration has been a pain. At the moment, I am able to deploy the app, but all I get is a status 500 error with the message "Internal Error". All logs and consoles are clear, in fact, Wrangler Tail gives me two requests with 200 OKs (one of them is the favicon). Any idea on how can I go about debugging this hair-pulling issue? Thanks in advance.

7 Replies

James•7mo ago

Have you tried running it locally with wrangler pages dev to try and reproduce the errors? That would be my first recommendation, if you haven't already, since debugging locally will be significantly easier than remotely.

Adi•7mo ago

+1 to what James said. Running pages dev locally is a great way to debug issues. Just off the top of my head tho, one thing I encountered when migrating to Vite was that I forgot to change my _routes.json and _headers file. Remember that previously assets were stored under the build folder in public. That's no longer the case. You want your _routes.json file to look like this

{
  "version": 1,
  "include": ["/*"],
  "exclude": ["/favicon.ico", "/assets/*"]
}

{
  "version": 1,
  "include": ["/*"],
  "exclude": ["/favicon.ico", "/assets/*"]
}

And _headers to look like this

/favicon.ico
  Cache-Control: public, max-age=3600, s-maxage=3600
/assets/*
  Cache-Control: public, max-age=31536000, immutable

/favicon.ico
  Cache-Control: public, max-age=3600, s-maxage=3600
/assets/*
  Cache-Control: public, max-age=31536000, immutable

There is an open PR to fix this in the Vite template, just not merged yet - https://github.com/remix-run/remix/pull/8722

GitHub

template(vite-cloudflare): Add _routes.json, _headers and .dev.vars...

👋 Hey, after testing the vite cloudflare template and deployed it I found some minor issues. It took me maybe 2 hours to find out to set Cloudflare settings 'Build output directory' to '...

bloushiOP•7mo ago

Thanks @James, my bad, I didnt mention that I have tested the code locally, and made a few changes to make it compatible with vite config. It will be nothing short of a miracle for my code to work directly on production with local testing 😆 The issue I am facing right now is my code runs perfect locally, no issues, but doesnt work at all when deployed. The build and deployment is successful, the "wrangler tail" command shows me just two requests that are OKs. Other than that, there are no logs, and I have no idea what is failing. Thanks @Adi, value feedback. My _routes.json and _headers.json looks very similar to what you have shared, just extra additions as required. The projects works perfect locally, I have no idea why the project builds and deploys successfully, but then all requests just return an "Internal Error", with no logs at all. Its a bit frustrating, debugging this issue has become like shooting in the dark, Cloudflare needs better logging, and some more love for CF pages.

Adi•7mo ago

Just to confirm, when you're running it locally, are you using vite dev or running a full build then using pages dev Just to give you some hope, I am running multiple remix vite apps in production, so it's definitely possible. Don't give up :MeowHeartCloudflare:

bloushiOP•7mo ago

I have tried both, vite dev and wrangler pages dev. Both work fine locally I know it is possible, I have a smaller remix vite project live without issues, this one is a larger project, and its difficult to incrementally break into smaller pieces and test deployment. Better logs would have definitely helped. One other thing that I noticed is that react-email package works with the classic compiler, but when added to the vite project, the project wont deploy, as startup time exceeds the allowed limits. I have removed the react-email package and plan to move it to a separate email service.

Adi•7mo ago

oooh you're using react-email? Yeah look I've had a lot of issues with that even in workers. Especially if you add in tailwind it makes a massive bundle. Maybe you're hitting some limits there? Like you suggested, I have it split out into it's own worker right now (using RPC), other projects call into it The only thing I can think off for react-email is to remember to enable nodejs_compat in production

bloushiOP•7mo ago

I have completely removed react-email from the vite project. The deployed project with Tailwind wouldn't complete deployment as startup time exceeds limits. My strategy for now, let it rest for a week, and revisit next week. I'll update the packages and try again. Lets hope for the best. Love Remix, CF and Vite, so I will have to make this work. Thanks @Adi for your help 🙏

Gaming

Programming

Debugging a deploy issue in a Remix + Vite Project