Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Importing files doesn't work on Vercel deployment #30

Open
RareSecond opened this issue Feb 29, 2024 · 14 comments
Open

Importing files doesn't work on Vercel deployment #30

RareSecond opened this issue Feb 29, 2024 · 14 comments
Labels
Good First Issue Misc: Good First Issue P: High Priority: High T: Bug Type: Bug

Comments

@RareSecond
Copy link

RareSecond commented Feb 29, 2024

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
@jxom
Copy link
Member

jxom commented Feb 29, 2024

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

@RareSecond
Copy link
Author

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

CleanShot 2024-03-01 at 16 04 15

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

@jxom
Copy link
Member

jxom commented Mar 2, 2024

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

@andypavia
Copy link

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

@ealeksandrov7
Copy link

ealeksandrov7 commented Mar 15, 2024

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
Copy link

andypavia commented Mar 15, 2024

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.

@tmm tmm added the Good First Issue Misc: Good First Issue label Mar 25, 2024
@dalechyn
Copy link
Collaborator

dalechyn commented Apr 5, 2024

@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.

.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
Copy link
Collaborator

Tried different approaches myself, can't fix.

Found a small improvement opportunity though: #258

@blaynem
Copy link

blaynem commented Apr 19, 2024

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

@dalechyn dalechyn added P: High Priority: High T: Bug Type: Bug labels Apr 20, 2024
@colinnielsen
Copy link

Also hitting this 🙋🏽‍♂️

@rforte
Copy link

rforte commented Jul 17, 2024

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
Copy link

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
Copy link
Collaborator

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
Copy link

rforte commented Jul 19, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Good First Issue Misc: Good First Issue P: High Priority: High T: Bug Type: Bug
Projects
None yet
Development

No branches or pull requests

10 participants