Export server and client methods from package ?

[Jarrodsz]

Great updates recently.

I have a longstanding issue preventing me from moving all my code to packages and thought i ask you for your wishsom. Perhaps you know a nice solutio since the discord issue on remix has not resulted in any resolutions so far.

my blog.server.ts keeps getting ended up in the browser. then having the method like this

export function getBlogIndexData(): BlogPostSummary[] {
  console.log("getBlogIndexData");

  const projectRoot = process.cwd();
  const postsDirectory = path.join(projectRoot, '___site/', '_posts');
  const filenames

prevents the app to load.

I boiled it down to server and client functions exported from a single index.ts
Causes remix to put server code in the client bundle.

My attempted solution was to split the index.ts from package to a index.client.ts and index.server.ts but importing packages from those in a remix app utilizing the package yields in lots of headache and tsconfig issues.

Seems like a common thing in remix you want to export from package index and have both server and client code ( server code is in a .server.ts) but still ending up in the client bundle since all exports from package index.ts

Do you know a workable clean solution to this problem?🙏

[PhilDL]

Hi and thank you for your support!

If the client and server code has to really coexist in the same package you could still isolate their exports in your package.json and even trick the remix compiler by naming your entrypoints with "XXXX.server".

Let's say you have a structure like that:

.
├── package.json
├── src
│   ├── client
│   │   ├── index.ts
│   │   ├── sales-person.test.ts
│   │   └── sales-person.ts
│   ├── index.test.ts
│   ├── index.ts
│   ├── queries.server
│   │   └── index.ts
│   ├── sales-person.test.ts
│   ├── sales-person.ts
│   └── types.ts
├── tsconfig.json
└── vitest.config.ts

Then you could map the exports from your package.json like so:

{
  "name": "@remix-gospel-stack/internal-nobuild",
  "version": "0.0.1",
  "private": true,
  "type": "module",
  "scripts": {
    "clean": "rimraf .turbo node_modules dist",
    "lint": "eslint ./src --fix",
    "test": "vitest run",
    "test:dev": "vitest",
    "typecheck": "tsc --project ./tsconfig.json --noEmit"
  },
  "devDependencies": {
    "@remix-gospel-stack/eslint-config": "workspace:*",
    "@remix-gospel-stack/tsconfig": "workspace:*",
    "rimraf": "^5.0.1",
    "typescript": "^5.1.6",
    "vite": "^4.3.9",
    "vite-tsconfig-paths": "^4.2.0",
    "vitest": "^0.32.2"
  },
  "exports": {
    "./package.json": "./package.json",
    ".": {
      "import": "./src/index.ts",
      "types": "./src/types.ts"
    },
    "./queries.server": {
      "import": "./src/queries.server/index.ts",
      "types": "./src/queries.server/index.ts"
    },
    "./client": {
      "import": "./src/client/index.ts",
      "types": "./src/client/index.ts"
    }
  }
}

I made a pull request that you can look at to see the modifications
#55

[Jarrodsz]

Thank you a bit busy so my dev on this is a little postponed and need a break soon so over worked, def going to look af it asap!