Vite: custom tsconfig paths are not respected when I pass getLoadContext to the Cloudflare Proxy plugin

[dimik]

Reproduction

According to the docs i have to pass getLoadContext to remix

You must pass in getLoadContext to both the Cloudflare Proxy plugin and the request handler in functions/[[path]].ts, otherwise you'll get inconsistent load context augmentation depending on how you run your app.

I have a path setting in the tsconfig.json

{
 ...
  "compilerOptions": {
    ...
    "paths": {
      "~/*": ["./app/*"]
    },
  },
}

This is my vite.config.ts:

import path from 'node:path';

import { vitePlugin as remix, cloudflareDevProxyVitePlugin as remixCloudflareDevProxy } from '@remix-run/dev';
import { installGlobals } from '@remix-run/node';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

import { getLoadContext } from './load-context';

installGlobals();

export default defineConfig({
  resolve: {
   // This also doesn't help
    alias: {
      '~/': path.resolve(__dirname, 'app/'),
    },
  },
  // this fails with "Error [ERR_MODULE_NOT_FOUND]: Cannot find package '~' imported from ..."
  plugins: [tsconfigPaths(), remixCloudflareDevProxy({ getLoadContext }), remix()],
});

System Info

System:
    OS: macOS 12.6.3
    CPU: (8) arm64 Apple M1 Pro
    Memory: 10.73 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
    pnpm: 8.14.1 - ~/.nvm/versions/node/v18.16.1/bin/pnpm
  npmPackages:
    @remix-run/cloudflare: ^2.8.1 => 2.8.1
    @remix-run/cloudflare-pages: ^2.8.1 => 2.8.1
    @remix-run/dev: ^2.8.1 => 2.8.1
    @remix-run/react: ^2.8.1 => 2.8.1
    @remix-run/router: ^1.15.3 => 1.15.3
    @remix-run/server-runtime: ^2.8.1 => 2.8.1
    @remix-run/testing: ^2.8.1 => 2.8.1
    vite: ^5.1.6 => 5.1.6

Used Package Manager

pnpm

Expected Behavior

custom paths must be respected when I pass getLoadContext to the Cloudflare Proxy plugin

Actual Behavior

i got error: "Error [ERR_MODULE_NOT_FOUND]: Cannot find package '~' imported from ..."

[l4j3b]

It would be useful to see your full tsconfig.json and package.json. I ran into a similar issue but solved it since, I just can't remember how but I think it had to do with tsconfig.json and/or package.json.

[Jackardios]

I faced the same problem. I think this is due to the fact that vite does not allow the use of tsconfig paths in vite.config.ts https://github.com/vitejs/vite/issues/10063

[dimik]

@jebenois

tsconfig.json:

{
  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx", "server.ts", "**/*.jsx"],
  "exclude": ["node_modules"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "target": "ES2022",
    "strict": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "skipLibCheck": true,
    "types": [
      "@cloudflare/workers-types/2023-09-04",
      "node",
      "@types/gtag.js",
      "jest",
      "@testing-library/jest-dom"
    ],
    "paths": {
      "~/*": ["./app/*"]
    },
    // Remix takes care of building everything in `remix build`.
    "noEmit": true
  },
  "sourceMap": true
}

package.json

{
  "name": "app",
  "version": "0.0.0",
  "sideEffects": false,
  "private": true,
  "scripts": {
    "dev": "remix vite:dev",
    "build": "remix vite:build",
    "start": "wrangler pages dev ./build/client",
    "deploy": "wrangler pages deploy ./build/client",
    "dev:debug": "node --inspect-brk ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@remix-run/dev/dist/cli.js dev --sourcemap --manual -c \"pnpm start\"",
    "lint": "eslint --fix --ext .ts,.tsx ./app",
    "typecheck": "tsc",
    "pw-start": "npx playwright test ./tests --config=./tests/resiliency-tests/playwright.config.ts --workers=1 --ui",
    "resiliency-test": "NODE_ENV=staging pnpm run pw-start",
    "resiliency-dev": "set NODE_ENV=staging && pnpm run pw-start",
    "test": "jest",
    "test:coverage": "jest --collectCoverage --coverageReporters html",
    "lighthouse": "lhci autorun"
  },
  "dependencies": {
    "@elastic/apm-rum": "^5.12.0",
    "@emotion/cache": "^11.11.0",
    "@emotion/react": "^11.11.1",
    "@emotion/server": "workspace:*",
    "@emotion/styled": "^11.11.0",
    "@microsoft/signalr": "^7.0.0",
    "@mui/base": "^5.0.0-beta.24",
    "@mui/icons-material": "^5.14.11",
    "@mui/lab": "5.0.0-alpha.146",
    "@mui/material": "^5.14.11",
    "@mui/utils": ">= 5",
    "@mui/x-date-pickers": "^5.0.20",
    "@remix-run/cloudflare": "^2.8.1",
    "@remix-run/cloudflare-pages": "^2.8.1",
    "@remix-run/react": "^2.8.1",
    "@remix-run/server-runtime": "^2.8.1",
    "@typeform/embed-react": "^2.22.0",
    "clsx": "^2.0.0",
    "cookie": "0.5.0",
    "core-js": "^3.36.0",
    "date-fns": "^3.3.1",
    "dayjs": "^1.11.8",
    "deepmerge": "^4.3.1",
    "ky": "^0.33.3",
    "lodash.debounce": "^4.0.8",
    "markdown-to-jsx": "^7.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-iframe": "^1.8.5",
    "react-is": "^18.2.0",
    "react-use": "^17.4.0",
    "remix-utils": "^7.5.0",
    "zod": "^3.21.4"
  },
  "peerDependencies": {
    "eslint": ">= 8",
    "miniflare": ">= 2",
    "wrangler": ">= 2"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20230914.0",
    "@lhci/cli": "^0.13.0",
    "@playwright/test": "^1.37.1",
    "@remix-run/dev": "^2.8.1",
    "@remix-run/router": "^1.15.3",
    "@remix-run/testing": "^2.8.1",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^14.2.1",
    "@types/cookie": "^0.5.2",
    "@types/css-mediaquery": "^0.1.4",
    "@types/gtag.js": "^0.0.18",
    "@types/jest": "^29.5.5",
    "@types/lodash.debounce": "^4.0.7",
    "@types/node": "^20.3.1",
    "@types/react": "^18.2.12",
    "@types/react-dom": "^18.2.5",
    "cross-env": "^7.0.3",
    "css-mediaquery": "^0.1.2",
    "dotenv": "^16.3.1",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^28.1.3",
    "prop-types": "^15.8.1",
    "typescript": "^5.2.2",
    "vite": "^5.1.6",
    "vite-tsconfig-paths": "^4.3.2"
  },
  "lint-staged": {
    "app/**/*.{js,jsx,ts,tsx}": [
      "eslint --fix"
    ]
  }
}

[emirefek]

any update on this? I can't use paths.

[arielvieira]

Here are a couple workarounds for this.

1. You can use nodemon to build the remix app and start the wrangler every time there's a file change, but that won't have HMR.

// package.json
"build": "remix vite:build",
"start": "wrangler pages dev ./build/client",
"preview": "npm run build && npm run start",
"dev": "nodemon --watch ./app/** --watch ./load-context.ts --ext js,json,ts,tsx --exec \"npm run preview\"",

2. Use hono and its @hono/vite-dev-server plugin instead of the native remix cloudflareDevProxyVitePlugin to run the dev server. Here's the example on how to use hono as a dev server in remix: https://github.com/yusukebe/hono-and-remix-on-vite

[ibrown-epic-games]

I'm having the same issue here. I need to use vite. NOT wrangler, as wrangler cpu profling and debugging is currently broken.

[JoshStwrt]

Vite currently has issues importing TS files with path aliases from the vite.config.ts file. My digging led me to https://github.com/vitejs/vite/issues/5370. As a workaround you can run remix vite:dev through tsx.

1. Add the tsx dependency
2. Update your dev script to: "NODE_OPTIONS=\"--import tsx/esm\" remix vite:dev"