Open dimik opened 6 months ago
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.
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
@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/@remix-run+dev@2.0.1_@types+node@20.8.3_react-dom@18.2.0_typescript@5.2.2/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"
]
}
}
any update on this? I can't use paths.
Here are a couple workarounds for this.
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\"",
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
I'm having the same issue here. I need to use vite. NOT wrangler, as wrangler cpu profling and debugging is currently broken.
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
.
tsx
dependencydev
script to: "NODE_OPTIONS=\"--import tsx/esm\" remix vite:dev"
Reproduction
According to the docs i have to pass getLoadContext to remix
I have a path setting in the tsconfig.json
This is my vite.config.ts:
System Info
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 ..."