plan to unify the management of our meta/action/loader, but encountered some issues ?

[yyong008]

We intend to unify the definition of meta and loader using objects or classes, including a static class. Please note the existence of a file named test.db.server.

import { json } from "@remix-run/node";
import { getName } from "~/.server/name/test.db.server";

export const IndexController = {
  meta() {
    return [{ title: "df" }];
  },
  async loader() {
    console.log("sdf");
    return json({
      name: getName() + "test_name",
    });
  },
};

In accordance with the following usage:

import { IndexController } from "~/controller/Index.Controller";


export const meta = IndexController.meta
export const loader  = IndexController.loader 

export default function Index() {
  const { a } = useLoaderData<typeof loader>()
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
      <h1>Welcome to Remix</h1>
      {JSON.stringify(a)}
    </div>
  );
}

We will receive an error message：

[vite] Pre-transform error: Server-only module referenced by client

We tested and found that either commenting out the use of the meta function or the invocation of the getName function in the loader will result in an error.

Internal server error: Server-only module referenced by client
'~/.server/name/test.db.server' imported by 'app/controller/Index.Controller.ts'
See https://remix.run/docs/en/main/future/vite#splitting-up-client-and-server-code

[sergiodxa]

You can't only add a part of a class in the bundle and not the rest, it's an all or nothing.

Because MetaFunction is used in the client browser then your whole class needs to be included.

You could use a class for your loader and action, but not for MetaFunction, that would need to be a separate function exported by the module or another module.

[yyong008]

Before starting, it wasn't known that the metaFunction was only applicable to client-side code.

[sergiodxa]

It runs on the server and the client