Client-side navigation silently fails when destination runs server-only code

[gatesn]

What version of Remix are you using?

1.15.0

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

See a reproduction here: https://github.com/gatesn/remix-redirect/tree/main/app/routes

Create a test.server.ts file containing a function:

export const serverFunction() {
  return "hello";
}

Create a route that uses the server function at the top-level. I think this is wrong? Or it might be ok? But I spent a very long time trying to find the root cause of this issue so it would be helpful if an error appeared somewhere.

import {serverFunction} from "~/test.server"

const _unused = serverFunction();

export default function Foo() {
  return <h1>Foo</h1>;
}

In some route, create a link to foo.

export default function Index() {
  return <Link to={"/foo"}>To Foo</Link>
}

Expected Behavior

Either the page navigates to foo, or an error is thrown in the server or client.

Actual Behavior

On clicking the link, the browser calls the foo loader (if one exists), but then the page will refresh without navigating to /foo.

[machour]

Hey @gatesn, this is indeed a misuse of Remix.

If you navigate to /foo manually, you'll see an error:

o.tsx:3 Uncaught TypeError: (0 , import_test.myServerFunction) is not a function
    at foo.tsx:3:17
(

This is because test.server was pruned from the client side, and replaced with an empty module, but your call at top level remained (look for the contents of foo-HASH.js in your network tab):

import {
  __commonJS,
  __toESM,
  require_jsx_dev_runtime
} from "/build/_shared/chunk-EETRBLDB.js";

// empty-module:~/test.server
var require_test = __commonJS({
  "empty-module:~/test.server"(exports, module) {              // <=== PRUNED
    module.exports = {};
  }
});

// app/routes/foo.tsx
var import_test = __toESM(require_test());
var import_jsx_dev_runtime = __toESM(require_jsx_dev_runtime());
var _unused = (0, import_test.myServerFunction)();         //  <=== KABOOM 💥 

Your server related code can only be within your loader or your action in your route.

/cc @pcattori I wonder if we could somehow enhance the DX here. Repro is at https://github.com/gatesn/remix-redirect