Vike raised bug when using tsconfig-paths

[neobats]

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)]

[neobats]

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 https://github.com/vikejs/vike/issues/1145

[brillout]

The error message should be improved though. Can you publish a reproduction?