remix-run / remix

Build Better Websites. Create modern, resilient user experiences with web fundamentals.
https://remix.run
MIT License
29.77k stars 2.51k forks source link

Remix dev mode redirect bug when `verbatimModuleSyntax` is set to `true` #10083

Open brookslybrand opened 1 week ago

brookslybrand commented 1 week ago

Reproduction

https://stackblitz.com/edit/remix-run-remix-e89vvn?file=tsconfig.json,app%2Froot.tsx,app%2Froutes%2Fsignup.tsx,app%2Froutes%2Fverify.tsx

System Info

latest remix packages and what not, your can see in the reproduction

Used Package Manager

npm

Expected Behavior

Redirect from an action should work as expected

Actual Behavior

This is one of the weirdest bugs I've run into. Basically if you have

// tsconfig.json
{
  "verbatimModuleSyntax": true,
}

and very specific imports setup, when you try to redirect from an action it'll cause the whole page to refresh and cancel the redirect. This isn't a problem in production, but it caused for a very difficult to track down bug in a larger app someone shared with me.

https://github.com/user-attachments/assets/b2dcaf32-2696-4df2-b2e0-04c9b93c1a5a

laishere commented 1 week ago

When we open the console, it shows the ReferenceError: process is not defined error, which I believe is cause by the "verbatimModuleSyntax": true. It will break the dynamic module loading here: https://github.com/remix-run/remix/blob/5954ad1520e921483fbe07f5995c6f9d92e7a37b/packages/remix-react/routeModules.ts#L180

Which will make the page reload as expected: https://github.com/remix-run/remix/blob/5954ad1520e921483fbe07f5995c6f9d92e7a37b/packages/remix-react/routeModules.ts#L220