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

[brookslybrand]

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.

redirect-madness.mov

[laishere]

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:

remix/packages/remix-react/routeModules.ts

Line 180 in 5954ad1

export async function loadRouteModule(

Which will make the page reload as expected:

remix/packages/remix-react/routeModules.ts

Line 220 in 5954ad1

window.location.reload();

[joseph0926]

Could this sequence of events be causing the issue?

verbatimModuleSyntax: true

• TypeScript configuration that enforces strict module syntax
• Requires explicit type imports and value imports separation

Stricter module analysis

• TypeScript performs more thorough dependency analysis
• Prevents automatic elimination of seemingly unused imports
• Makes tree-shaking more challenging for the bundler

json import retained

• The unreachable return json({}) keeps the import alive
• Tree-shaking fails to remove this import despite being unreachable
• This is crucial as it maintains dependencies that would normally be eliminated

Node.js util module dependency included

• The retained json import brings in Node.js util module
• This happens because @remix-run/node's json function has util dependencies
• Would normally be tree-shaken out if json import was eliminated

Module load fails in browser

• Browser attempts to load Node.js util module
• Fails because process is not defined in browser environment
• This is a fundamental Node.js vs Browser environment conflict

Remix error handler triggered

• loadRouteModule function catches the module load failure
• Checks for SPA mode and HMR availability
• Determines whether to throw or reload

Page refresh occurs

• Without SPA mode, falls back to full page reload
• This is Remix's safety mechanism for module load failures

---

As it turns out, the core of the problem seems to be a “tree shaking” failure