wevm/frog

Importing files doesn't work on Vercel deployment

Open

#30 opened on Feb 29, 2024

View on GitHub
 (14 comments) (4 reactions) (0 assignees)TypeScript (440 stars) (97 forks)user submission
Good First IssueP: HighT: Bug

Description

I created a minimal reproducible example.

This repository was started by running bunx create-frog -t vercel. Then the only change I did was extract the actual rendering of the frame into a separate file.

This all works fine when running bun run dev locally.

image

However, after deploying to Vercel (by running bun run deploy), the serverless function is crashing.

This is the full error log from Vercel

Error: Cannot find module '/var/task/api/Frame.js' imported from /var/task/api/index.js
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:332:11)
    at moduleResolve (node:internal/modules/esm/resolve:1029:10)
    at moduleResolveWithNodePath (node:internal/modules/esm/resolve:876:12)
    at defaultResolve (node:internal/modules/esm/resolve:1242:79)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:403:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:372:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:249:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
    at link (node:internal/modules/esm/module_job:75:36) {
  url: 'file:///var/task/api/Frame.js',
  code: 'ERR_MODULE_NOT_FOUND'
}
INIT_REPORT Init Duration: 284.92 ms	Phase: init	Status: error	Error Type: Runtime.ExitError
Error: Cannot find module '/var/task/api/Frame.js' imported from /var/task/api/index.js
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:332:11)
    at moduleResolve (node:internal/modules/esm/resolve:1029:10)
    at moduleResolveWithNodePath (node:internal/modules/esm/resolve:876:12)
    at defaultResolve (node:internal/modules/esm/resolve:1242:79)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:403:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:372:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:249:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
    at link (node:internal/modules/esm/module_job:75:36) {
  url: 'file:///var/task/api/Frame.js',
  code: 'ERR_MODULE_NOT_FOUND'
}
INIT_REPORT Init Duration: 359.00 ms	Phase: invoke	Status: error	Error Type: Runtime.ExitError
Error: Runtime exited with error: exit status 1

Contributor guide

Tech stack
typescriptnodejsvercelbunreact
Domain
full stack
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Node.js basicsVercel deploymentModule imports
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Check the build output on Vercel after deployment. Compare the local build with the deployed version. Look at the vercel.json or build command to see if the .tsx file is being compiled. Possibly the issue is that Bun's bundler doesn't output the Frame.js file correctly when using relative imports. Check if there is a need for explicit file extensions or if Vercel's Node.js runtime version is causing issues with ESM. Review the minimal reproducible example repository for any configuration differences.