tsconfig paths can't be loaded

[tclain-pillar]

When trying to import a client component using typescript path alias, I get the following error on screen

TypeError: Failed to fetch dynamically imported module: http://localhost:3002/src/components/counter.tsx

The main page displays for a second then fails with the error above.

The console has this error:

6:41:42 PM [vite] Pre-transform error: Failed to load url /react (resolved id: /Users/tclain/z/repro/paths/react) in /Users/tclain/z/repro/paths/src/components/counter.tsx. Does the file exist?
6:41:42 PM [vite] Pre-transform error: Failed to load url /react/jsx-dev-runtime (resolved id: /Users/tclain/z/repro/paths/react/jsx-dev-runtime) in /Users/tclain/z/repro/paths/src/components/counter.tsx. Does the file exist?

pnpm build gives:

node:internal/process/esm_loader:40
      internalBinding('errors').triggerUncaughtException(
                                ^

[Error: [vite:load-fallback] Could not load /Users/tclain/z/repro/paths/react/jsx-runtime (imported by src/pages/index.tsx): ENOENT: no such file or directory, open '/Users/tclain/z/repro/paths/react/jsx-runtime'] {
  errno: -2,
  code: 'PLUGIN_ERROR',
  syscall: 'open',
  path: '/Users/tclain/z/repro/paths/react/jsx-runtime',
  pluginCode: 'ENOENT',
  plugin: 'vite:load-fallback',
  hook: 'load',
  watchFiles: [
    '/Users/tclain/z/repro/paths/node_modules/.pnpm/react-server-dom-webpack@19.0.0-beta-e7d213dfb0-20240507_react-dom@19.0.0-beta-e7d213dfb0-202_ozu3bnomygrcqdvc7ehsn47hbi/node_modules/react-server-dom-webpack/server.edge.js',
    '/Users/tclain/z/repro/paths/node_modules/.pnpm/waku@0.20.2_@types+node@20.14.2_react-dom@19.0.0-beta-e7d213dfb0-20240507_react@19.0.0-beta-e_ufvglycicg6npnae675v5tqo44/node_modules/waku/dist/server.js',
    '/Users/tclain/z/repro/paths/src/pages/_layout.tsx',
    '/Users/tclain/z/repro/paths/node_modules/.pnpm/waku@0.20.2_@types+node@20.14.2_react-dom@19.0.0-beta-e7d213dfb0-20240507_react@19.0.0-beta-e_ufvglycicg6npnae675v5tqo44/node_modules/waku/dist/router/client.js',
    '/Users/tclain/z/repro/paths/src/pages/index.tsx',
    '/Users/tclain/z/repro/paths/node_modules/.pnpm/waku@0.20.2_@types+node@20.14.2_react-dom@19.0.0-beta-e7d213dfb0-20240507_react@19.0.0-beta-e_ufvglycicg6npnae675v5tqo44/node_modules/waku/dist/client.js',
    '/Users/tclain/z/repro/paths/src/components/counter.tsx',
    '/Users/tclain/z/repro/paths/src/pages/about.tsx',
    '/Users/tclain/z/repro/paths/src/components/footer.tsx',
    '/Users/tclain/z/repro/paths/src/components/header.tsx',
    '/Users/tclain/z/repro/paths/package.json'
  ]
}

Reproduction

I repro-ed with the following steps

• pnpm create waku@latest
• pnpm i
• pnpm add vite-tsconfig-paths
• added a vite.config.ts

import tsconfigPaths from "vite-tsconfig-paths";
import { fileURLToPath } from "node:url";

/** @type {import('vite').UserConfig} */
export default {
  plugins: [
    tsconfigPaths({
      root: fileURLToPath(new URL(".", import.meta.url)),
    }),
  ],
};

• added paths to tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "target": "esnext",
    "downlevelIteration": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "skipLibCheck": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "types": ["react/experimental"],
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Change

import { Counter } from "../components/counter";

to

import { Counter } from "@/components/counter";

Things I tried:

• migrate to 0.21.0-alpha-1 (same error)
• use vite resolve.alias directly. fails as soon as I import a client component

repro repo: https://github.com/tclain-pillar/repro-waku-ts-paths

[dai-shi]

Does this example help? https://github.com/dai-shi/waku/tree/main/examples/13_path-alias

[tclain]

Hi ! the example works but uses the low level API with defineEntries (I don't see any docs, the API is a bit cryptic)

as soon as using the pages directory with the minimal steps above. it does fail

[dai-shi]

Hmm, it looks like more complicated than I thought. I wonder if @himself65 has any ideas.

(I don't see any docs, the API is a bit cryptic)

Well, it's not for everybody, but I would like to learn how it feels cryptic... The docs are https://github.com/dai-shi/waku/blob/main/docs/minimal-api.mdx, but it's also "minimal". I agree it's not super developer friendly, because it's not.