Repository: vikejs/vike

Issue #1145: Support `vite-tsconfig-paths`
Created: 2023-09-26T08:22:42Z
Description
Nx's Vite plugin has a hard dependency on vite-tsconfig-paths, so it'd be nice to support vite-tsconfig-paths in order to have a more seamless support for Nx.
A warning should still be shown as vite-tsconfig-paths is causing a lot of issues. (The warning should be suppressible.)
An alternative to vite-tsconfig-paths is alias-hq as mentioned by @jbruxelle in #1141.
I'm thinking of implementing an alternative myself as I belive a much simpler solution can be implemented.

Duplicate issue #1869: Vike raised bug when using tsconfig-paths
Created: 2024-09-10T11:05:45Z
Description
This could be an issue in user error (this was my second time setting up vite-tsconfig-paths), but I added vite-tsconfig-paths to my dev dependencies and my vite.config.ts, set up my paths in tsconfig.json. I restarted the dev server, and then noticed that hot module reloading stopped working in dev.
I rolled back my changes for the config paths/aliases, restarted the dev server, and the hot module reloading worked like a charm!
If I add the tsconfig-paths back in, the hot module reloading breaks again.
Please let me know what other information I can provide or if there's some other way I can be a help!
This error was raised:
at isVirtualFileId (file:///Users/[redacted]/node_modules/vike/dist/esm/utils/virtual-files.js:13:5)
    at ResolveIdContext.resolveId (file:///Users/[redacted]/node_modules/vike/dist/esm/node/plugin/plugins/importUserCode/index.js:33:17)
    at PluginContainer.resolveId (file:///Users/gb/[redacted]/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:48919:17)
    at ResolveIdContext.resolve (file:///Users/[redacted]/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:49079:15)
    at ResolveIdContext.handler (file:///Users/[redacted]/node_modules/vike/dist/esm/node/plugin/plugins/fileEnv.js:39:34)
    at PluginContainer.resolveId (file:///Users/[redacted]/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:48918:22)
    at ResolveIdContext.resolve (file:///Users/[redacted]/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:49079:15)
    at viteResolve (file:///Users[redacted]/node_modules/vite-tsconfig-paths/src/index.ts:162:12)

my vite.config.ts
import { telefunc } from "telefunc/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
import vike from "vike/plugin"
import tsConfigPaths from "vite-tsconfig-paths"

export default defineConfig({
  plugins: [tsConfigPaths(), vike({}), react({}), telefunc()],
})
my tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "allowJs": true,
    "checkJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "module": "ESNext",
    "noEmit": true,
    "moduleResolution": "Bundler",
    "baseUrl": ".",
    "paths": {
      "@/*": ["/*"],
      "@utils/*": ["utils/*"],
      "@components/*": ["components/*"],
    },
    "target": "ES2022",
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],
    "types": [
      "vite/client",
      "vike-react"
    ],
    "jsx": "preserve",
    "jsxImportSource": "react"
  },
  "exclude": [
    "dist"
  ]
}
example import using the alias:
// /components/Burst/index.tsx
import "./style.css"
import { sample } from "@utils/sample" // <-- the import in question
import { HTMLAttributes } from "react"

type BurstProps = {
  text: string
  color?: string
} & HTMLAttributes<HTMLParagraphElement>

export const Burst = ({ color = "primary700", text, ...props }: BurstProps) => {
  const colorClass = color === "random" ? getRandomColor() : color
  return // redacted
}

const getRandomColor = () => {
  const colors = [
    "primary100",
    "primary400",
    "primary500",
    "primary700",
    "primary900",
    "secondary100",
    "secondary400",
    "secondary500",
    "secondary700",
    "secondary900",
  ]
  return sample(colors)
}
// /utils/sample/index.ts
export const sample = <T>(arr: T[]): T => arr[Math.floor(Math.random() * arr.length)]

Closing comment (2024-09-10T11:07:57Z): Gah! I didn't look through the existing issues before submitting this; I followed the dev server's instructions straightaway. Seems reasonable to consider this a duplicate of #1145