Importing files doesn't work on Vercel deployment

[RareSecond]

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.

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

[jxom]

Hmm, seems like Vercel Build CLI has trouble importing JSX files. Taking a look.

[RareSecond]

So I stumbled upon this issue on the Vercel GH and contacted Vercel support with the details from this repro.

I'll try to see what exactly they know is going wrong and if there are ways around it!

[jxom]

We could probably transpile the JSX files before the vercel build step. Can take a look into it.

[andypavia]

We are having the same issue. Are there any updates here?

[ealeksandrov7]

Hey guys! Hitting the same issue. It's really annoying & hard to maintain everything in a single jsx api file.
Do you have any new information on this issue?

Should we just ditch the vercel template and try to migrate to a nextjs one? Would hate to do that as I find the vercel one a lot easier to debug.

[andypavia]

We deployed our project through Vercel by putting everything into one file. Horrible and hard to maintain...

Some people were able to deploy through Cloudflare workers. We weren't able to since Neynar uses Axios, and Cloudflare doesn't support Axios for some reason.

[dalechyn]

@RareSecond, in your reproducible example, there is a circular dependency issue. index.tsx depends on Frame.tsx and vice-versa.

For everyone having a pain of maintaining everything in a single file, there is a .route method that allows you to join multiple frogs in one.

frog/playground/src/index.tsx

Lines 180 to 187 in 21dff58

	.route('/ui', uiSystemApp)
	.route('/fonts', fontsApp)
	.route('/middleware', middlewareApp)
	.route('/neynar', neynarApp)
	.route('/routing', routingApp)
	.route('/transaction', transactionApp)
	.route('/todos', todoApp)
	.frame('/:dynamic', (c) => {

That's definitely something that has to be put in the docs.

[dalechyn]

Tried different approaches myself, can't fix.

Found a small improvement opportunity though: #258

[blaynem]

Any updates on this? Wondering if theres at least a work around that's not "put everything into a single file"

[colinnielsen]

Also hitting this 🙋🏽‍♂️

[rforte]

This bug is a huge bummer. Jamming components into the main index file isn't sustainable. Is the answer to simply migrate away from Vercel?

[99darwin]

Jumping in here to see if there's any update on this. My frame is getting relatively complex and difficult to manage from a single file.

[dalechyn]

I'll make another push on this this weekend.

From my previous attempt I remember there was a limitation on Vercel side, that generally Serverless API handlers could not import other modules.

[rforte]

I'm importing modules into my api/index.tsx file just fine. It's when the imported module contains JSX. It appears that those modules get stripped out entirely.