File conventions *.client.ts and *.server.ts don't work in custom routes

[woody146]

What version of Remix are you using?

2.01

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

• [X] Yes

Steps to Reproduce

Define custom routes in remix.config.js

routes: async (defineRoutes) => {
    // If you need to do async work, do it before calling `defineRoutes`, we use
    // the call stack of `route` inside to set nesting.

    return defineRoutes((route) => {
      // A common use for this is catchall routes.
      // - The first argument is the React Router path to match against
      // - The second is the relative filename of the route handler
      route("/test", "../src/test.tsx");
    });
  },

File src/test.tsx

import { PhaserComponent } from "./phaser.client";

import React, { Suspense } from "react";

const PhaserComponent = React.lazy(() => import("./phaser.client"));

export default function test() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <PhaserComponent />
      </Suspense>
    </div>
  );
}

File phaser.client.tsx

import Phaser from "phaser";

export default function PhaserComponent() {
  return <div>Phaser {Phaser.VERSION}</div>;
}

Expected Behavior

File build/index.js doesn't contain source code of src/phaser.client.tsx

Actual Behavior

File build/index.js contains source code of src/phaser.client.tsx

[kiliman]

Remix only processes *.server and *.client modules for files in the app folder.

You'd need to patch Remix if you want it to handle other folders.

https://github.com/remix-run/remix/blob/a20ae7fb0727212ac52bdc687513c61851ac4014/packages/remix-dev/compiler/plugins/emptyModules.ts#L21-L23

patches/@remix-run+dev+2.0.1.patch

diff --git a/node_modules/@remix-run/dev/dist/compiler/plugins/emptyModules.js b/node_modules/@remix-run/dev/dist/compiler/plugins/emptyModules.js
index c33acaa..7f72af8 100644
--- a/node_modules/@remix-run/dev/dist/compiler/plugins/emptyModules.js
+++ b/node_modules/@remix-run/dev/dist/compiler/plugins/emptyModules.js
@@ -53,7 +53,9 @@ function emptyModulesPlugin({
         // Limit this behavior to modules found in only the `app` directory.
         // This allows node_modules to use the `.server.js` and `.client.js`
         // naming conventions with different semantics.
-        path__namespace.resolve(args.resolveDir, args.path).startsWith(config.appDirectory)) {
+        path__namespace.resolve(args.resolveDir, args.path).startsWith(config.appDirectory) ||
+        path__namespace.resolve(args.resolveDir, args.path).startsWith(config.appDirectory.replace('/app', '/src'))
+        ) {
           return {
             path: args.path,
             namespace: "empty-module"

After patch

// empty-module:./phaser.client
var require_phaser = __commonJS({
  "empty-module:./phaser.client"(exports, module) {
    module.exports = {};
  }
});

[woody146]

Thank you for the solution, but I think remix should add config for this