[How to] Run remix-express-vite within a monorepo (turborepo)

[superjose]

I'm going to share this because I think this may be helpful.

If you're running remix within a mono repo (in my case, turborepo) without a build step per project, like this one, you will likely run into issues in which Vite won't be able to resolve the imports.

To fix this, you must manually add a resolve.alias in the vite.config.ts:

Full example:
(Using @alertdown/auth)

import { vitePlugin as remix } from '@remix-run/dev';
import { defineConfig } from 'vite';
import { installGlobals } from '@remix-run/node';
import tsconfigPaths from 'vite-tsconfig-paths';
import { lingui } from '@lingui/vite-plugin';
import macrosPlugin from 'vite-plugin-babel-macros';
import tailwindcss from 'tailwindcss';
import { remixRoutes } from 'remix-routes/vite';
import { expressDevServer } from 'remix-express-dev-server';
import { denyImports } from 'vite-env-only';

installGlobals({ nativeFetch: true });

export default defineConfig({
  plugins: [
    expressDevServer(),
    denyImports({}),
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
    remixRoutes(),
    tsconfigPaths(),
    lingui(),
    macrosPlugin(),
  ],
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  },
// Add these
  resolve: {
    alias: {
      '@alertdown/auth': '../../libs/auth/src',
    },
  },
});

If that doesn't work, and vite complains about an unknown .ts extension, install tsx and modify your package.json

{
  "scripts": {
    "build": "remix vite:build",
    "dev": "NODE_OPTIONS=\"--import tsx/esm\" vite"
    // Other scripts omitted
 }, 
 "dependencies": {
     // uses pnpm workspaces
    "@alertdown/auth": "workspace:*"
    // Other dependencies omitted
}
}

This should get yourself up and running!

@kiliman Let me know if you want me to add it into the docs.

[kiliman]

I think this would be perfect to add in Discussions. Thanks!