Vercel cannot find module

Question

I'm deploying to Vercel using the CLI and through git and I my relative imports always result in a

2023-07-14T16:16:06.394Z    undefined   ERROR   Error: Cannot find module '/var/task/components/card' imported from /var/task/api/top-tracks.js
    at new NodeError (node:internal/errors:399:5)
    at finalizeResolution (node:internal/modules/esm/resolve:331:11)
    at moduleResolve (node:internal/modules/esm/resolve:994:10)
    at moduleResolveWithNodePath (node:internal/modules/esm/resolve:938:12)
    at defaultResolve (node:internal/modules/esm/resolve:1202:79)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}
RequestId: 8994f047-0b25-4abb-b529-b9779fde07ce Error: Runtime exited with error: exit status 1
Runtime.ExitError

Here is the line that errors:

import { Card } from "../components/card";

Here is the important parts of the file structure:

.
├── api
│   ├── inf-artists.ts
│   ├── inf-playing.ts
│   ├── inf-tracks.ts
│   ├── now-playing.ts
│   └── top-tracks.ts
├── components
│   ├── 404.tsx
│   ├── card.tsx
│   ├── cardplayer.tsx
│   ├── nowplaying.tsx
│   ├── readmeimg.tsx
│   ├── text.tsx
│   ├── track.tsx
│   └── webpage.tsx

Here is the vercel.json

{
  "version": 2,
  "rewrites": [{ "source": "/(.*)", "destination": "/api/$1" }]
}

I've tried renaming all my files to lowercase without success.

Answer 1

I faced the same issue where the vercel log saaid that a module (.ts) could not be imported from another module (.js) the way I solved it was by renaming any module import to .js even though the file itself has a .ts extention

something like this