I'm migrating a remix project from esbuild to vite.
It's giving roll up error as shown in the pic.
The issue is in referencing the files. This relative (dot) import doesn't work.
import { DataContextAppLayout } from "./components/Layout/DataContextAppLayout";However, this ~ import works.
import { DataContextAppLayout } from "~/components/Layout/DataContextAppLayout";I have 500+ files, really don't wanna change how I import. How do I make the relative imports work?
It builds fine locally, even with vercel build but doesn't work when deployed to vercel.
Packages:
"vite": "^5.3.1", "vite-tsconfig-paths": "^4.3.2" "node": ">=18.0.0" "@remix-run/dev": "^2.15.1", "@remix-run/node": "^2.15.1",...vite.config.ts
import { vitePlugin as remix } from "@remix-run/dev";import { installGlobals } from "@remix-run/node";import { defineConfig } from "vite";import tsconfigPaths from "vite-tsconfig-paths";installGlobals();export default defineConfig({ plugins: [remix(), tsconfigPaths()], ssr: { noExternal: [/^d3.*$/, /^@nivo.*$/], },});tsconfig.json
{ "include": [ "**/*.ts", "**/*.tsx", "**/.server/**/*.ts", "**/.server/**/*.tsx", "**/.client/**/*.ts", "**/.client/**/*.tsx" ], "compilerOptions": { "lib": ["DOM", "DOM.Iterable", "ES2022"], "types": ["@remix-run/node", "vite/client"], "isolatedModules": true, "esModuleInterop": true, "jsx": "react-jsx", "module": "ESNext", "moduleResolution": "Bundler", "resolveJsonModule": true, "target": "ES2022", "strict": true, "allowJs": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "baseUrl": ".", "paths": { "~/*": ["./app/*"] }, // Vite takes care of building everything, not tsc. "noEmit": true }}The same packages and config are working fine for another project so I don't know how to recreate it. This is the template I'm using for both the working one and the not working one. I haven't made any changes to entry files or any other files. I'd appreciate any help in resolving the issue.