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
vitejs/vite#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.

[stewarthsoj]

Vite currently has issues importing TS files with path aliases from the vite.config.ts file. My digging led me to vitejs/vite#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"

[merin83]

Tried out the tsx workaround shared by JoshStwrt above #9171 (comment) fixed the issue for me.

To help fixing the root cause here are some details,

I came across the same issue while trying out the remix + cloudflare workers example and passing getLoadContext to the cloudflareDevProxyVitePlugin in the vite.config.ts file.

I am not sure if this issue is related to Vite or Vite importing with tsconfig paths because,

• When I don't pass the getLoadContext to the cloudflareDevProxyVitePlugin the remix + cloudflare workers example with vite config seems to be working with the tsconfig paths.
• I have also tried out the remix + tailwindcss example where tsconfig paths with vite config working as well here.

So it looks like as soon as we pass getLoadContext to the cloudflareDevProxyVitePlugin in the vite.config.ts file only then it's breaking importing with tsconfig paths. By looking at the cloudflareDevProxyVitePlugin code declaration my guess is that cloudflareDevProxyVitePlugin is overriding and breaking the vite importing with tsconfig paths behaviour when we are passing getLoadContext in the vite.config.ts file.