Handling of mixed .server and .client files inside a single index.ts file

[RobertGemmaJr]

I'm beginning to migrate from Remix's default compiler to Remix Vite and I'm running into a major issue with the way we structured our app. Inside our folders we use an index.ts file to combine the exports like so:

/**
 * @module Firebase
 */
export * from "./firebase.client";
export * from "./firebase-admin.server";
export * from "./firebase.types";
export * from "./firebase.utils";

And then we use tsconfig so we can call import { _ } from "@auth" to pull code from any of the files within the module. The current remix compiler handles this great but Vite picks up that there's server only code present because of the call to export * from "./firebase-admin.server";.

I've tried a few things to no evail:

1. vite-env-only seems promising but it doesn't work for the calls to import and exports
2. Nested .server/ folders with a separate index.ts breaks the tsconfig paths. TS is never able to resolve that second path
   • My entry is "@auth": ["app/auth", "app/auth/.server"]

The only thing I've been able to get to work is add the .server/ nested folder, move code inside it, add a NEW entry to tsconfig, and split apart the import statements everywhere else in the code. It "works" but boy would it be one heck of a refactor to do the entire app and it adds a lot of code that there ought to be a more elegant solution to.

Has anyone else run into this when migrating to Remix Vite? How did you solve the problem?

[RobertGemmaJr]

Here's my current tsconfig.json for reference, without the (failed) attempts at using multiple paths:

{
  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["./cypress", "./cypress.config.ts", "**/*.test.ts"],
  "compilerOptions": {
    "allowJs": false,
    "baseUrl": ".",
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ES2022",
    "moduleResolution": "Bundler",
    "noEmit": true, // Remix takes care of building everything in `remix build`.
    "paths": {
      "@auth": ["app/auth"],
      "@components": ["app/components"],
      "@components/*": ["app/components/*"],
      "@constants": ["app/constants"],
      "@db": ["app/db"],
      "@db/*": ["app/db/*"],
      "@environment": ["app/environment"],
      "@hooks": ["app/hooks"],
      "@i18n": ["app/i18n"],
      "@routes/*": ["app/routes/*"],
      "@session": ["app/session"],
      "@theme": ["app/theme"],
      "@types": ["app/types"],
      "@utils": ["app/utils"],
      "@app/*": ["app/*"],
      "@cypress/*": ["cypress/*"]
    },
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "ESNext",
    "types": ["cypress", "@testing-library/cypress", "vitest/globals"]
  }
}

[NeoParadox]

@RobertGemmaJr I am running into a similar issue with our existing code base. Did you manage to find an acceptable solution in the meantime?

[RobertGemmaJr]

I decided to go with /sever/ subfolders and having two index files.

So I did end up with imports along the lines of from "@auth" and from "@auth/server" in the same file but Remix was able to prune everything correctly in that case