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.
