2

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.

Kevin Jiang
  • 271
  • 3
  • 10
  • The error says *...imported from /var/task/api/top-tracks.js*, but your folder structure has *api - top-tracks.ts*. Trying to import `.js`, but has `.ts`? Typo? Did I understand wrongly? – Sally loves Lightning Jul 26 '23 at 00:48
  • can you post your card component code, looks like the issue is how you are exporting the card component. – raman Jul 26 '23 at 01:14

2 Answers2

1

It seems that you are exporting your card as default.

If you have something like export default Card, you need to remove braces from import statement.

Import Card from ...
Explorer
  • 45
  • 12
-1
import { Card } from "../components/card.tsx";

Additionally, ensure that the file names in your import statements match the actual file names in your project, including the file extension (.tsx in this case).

After making these changes, re-deploy your project to Vercel, and the import error should be resolved.

Raj Kansara
  • 36
  • 5