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/[email protected][email protected]_ozu3bnomygrcqdvc7ehsn47hbi/node_modules/react-server-dom-webpack/server.edge.js',
    '/Users/tclain/z/repro/paths/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]_ufvglycicg6npnae675v5tqo44/node_modules/waku/dist/server.js',
    '/Users/tclain/z/repro/paths/src/pages/_layout.tsx',
    '/Users/tclain/z/repro/paths/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]_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/[email protected]_@[email protected][email protected][email protected]_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.

[jackeydou]

Hi, I have the same issue, and solve it by changing vite.config.ts, not use vite-tsconfig-paths. I think there are some compatibility issues with vite-tsconfig-paths.

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

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

[dai-shi]

@jackeydou Thanks for investigating.

@himself65 Does that sound reasonable?

[jackeydou]

@jackeydou Thanks for investigating.

@himself65 Does that sound reasonable?

I am not very familiar with vite and its ecosystem, otherwise I could help with further debugging.

[himself65]

I will check this today

[himself65]

I can reproduce this

/Users/himself65/Code/waku-issue/src/pages/index.tsx. Does the file exist?
12:39:39 AM [vite] Error when evaluating SSR module /src/pages/index.tsx:
|- Error: Failed to load url @/components/counter (resolved id: @/components/counter) in /Users/himself65/Code/waku-issue/src/pages/index.tsx. Does the file exist?
    at loadAndTransform (file:///Users/himself65/Code/waku-issue/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-BEhTnQAI.js:51857:17)
    at async instantiateModule (file:///Users/himself65/Code/waku-issue/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-BEhTnQAI.js:52816:44)

Cannot process RSC Error: Failed to load url @/components/counter (resolved id: @/components/counter) in /Users/himself65/Code/waku-issue/src/pages/index.tsx. Does the file exist?
    at loadAndTransform (file:///Users/himself65/Code/waku-issue/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-BEhTnQAI.js:51857:17)
    at async instantiateModule (file:///Users/himself65/Code/waku-issue/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-BEhTnQAI.js:52816:44) {
  code: 'ERR_LOAD_URL'
}

[himself65]

I'm guessing we didn't load vite config correctly somewhere

[himself65]

I feel it's related to aleclarson/vite-tsconfig-paths#135

[himself65]

it's their bug, remove baseUrl will fix the issue.

@dai-shi could close this issue

Realted Code: https://github.com/aleclarson/vite-tsconfig-paths/blob/5c9477078d3a913ade563b168ff4a9ccace187a2/src/index.ts#L228

[himself65]

I think the real reason is inside initialModules, it will presever the origial id for a file if it includes alias (plugin will load it before vite analysis the code path). So react will be still react instead of node_modules/path/to/react

[dai-shi]

So, is it a bug on our end?

[himself65]

So, is it a bug on our end?

Kind of? Because I don't think initialModules is the suggested solution from vite. This might cause some plugin are called before than vite internal laoding mechanism, that's might why id is react instead of path/to/node_modules/react

[dai-shi]

@Aslemammad

[himself65]

giving some more context:

In normal vite playground, for this line of code, id will be path/to/node_modules/id, but in waku it's just id

[Aslemammad]

I just created a fresh waku template pnpm create waku@latest, adding all those steps for reproduction, but now apparently it's working.

Can anyone verify that?