Next.js & Vercel Support

[caseypugh]

There's an ongoing thread #124 here about how to integrate bull-board/express with Nextjs. The latest solution works great, however, if you are deploying to Vercel you run into issues trying to access @bull-board/ui/package.json.

Here's the main issue, I believe

const uiBasePath = path.dirname(eval(`require.resolve('@bull-board/ui/package.json')`));

Vercel is not going to give access to the full path of their server... so pretty sure relative paths need to be used instead. Something like...

  const uiBasePath = "node_modules/@bull-board/ui"
  serverAdapter
    .setQueues(bullBoardQueues)
    .setViewsPath(uiBasePath + 'dist')
    .setStaticPath('/static', uiBasePath + 'dist/static')    

Also, it'd be great to see official Nextjs support in the documentation.

[felixmosh]

How Vercel suggest to work with paths? The code you've mentioned is correct by Node, so if there is some restrictions in Vercel the solution should come from them.

Btw, the code fixes #310

[caseypugh]

I'm pretty sure generally all you need to do is specify the relative paths which should work for everyone, but I could be wrong. @felixmosh whats the best way to test & pull in my forked changes into my repo?

[felixmosh]

You can install from github from you branch...

[samuelcole]

+1, I'm getting the same error on Vercel:

Error: Cannot find module '@bull-board/ui/package.json'
Require stack:
- /var/task/node_modules/@bull-board/api/dist/src/index.js
- /var/task/apps/platform/.next/server/pages/api/queues/[[...path]].js
- /var/task/node_modules/next/dist/server/next-server.js
- /var/task/apps/platform/___next_launcher.cjs
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at eval (eval at createBullBoard (/var/task/node_modules/@bull-board/api/dist/src/index.js:13:47), <anonymous>:1:9)
    at createBullBoard (/var/task/node_modules/@bull-board/api/dist/src/index.js:13:47)
    at /var/task/apps/platform/.next/server/pages/api/queues/[[...path]].js:88:65 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/var/task/node_modules/@bull-board/api/dist/src/index.js',
    '/var/task/apps/platform/.next/server/pages/api/queues/[[...path]].js',
    '/var/task/node_modules/next/dist/server/next-server.js',
    '/var/task/apps/platform/___next_launcher.cjs'
  ]
}

[felixmosh]

Any suggestions how to fix this?

[caseypugh]

@felixmosh @samuelcole I have a fork where I have been testing a potential fix. I'm using yarn link locally to test the change and it works great, but I'm not sure how to go about testing on Vercel.

AFAIK, I can't simply just point my package.json to my fork, because it doesnt contain any of the compiled builds that get published on npm. Any suggestions / best practices on how to go about testing on production?

[felixmosh]

You can point to your fork with a branch, which there will push the dist.

[samuelcole]

any update on this? i'm ridiculously running bull-board on my local computer with my production redis url to work around this 😬

[felixmosh]

@samuelcole did you debug the issue? I'm not familiar with Vercel at all...

[samuelcole]

i'm not sure how to deploy @caseypugh's branch to vercel

my package.json has

"@bull-board/express":` "^4.3.2",

can i just point that to casey's github url?

[caseypugh]

@samuelcole you can technically do:

"@bull-board/express": "caseypugh/bull-board",

but it wont work. my dumb hack around this has been to separately deploy a vanilla Bull Dashboard to Heroku (no nextjs). I put a queues folder in my nextjs monorepo and then added these extra commands to my package.json for deploying the dashboard (and workers).

{
  ...
  "build": "yarn queue-build",
  "queue-build": "npx tsc --esModuleInterop true --outDir .build/ queues/*.ts",
  "dev:worker": "npx nodemon queues/process.ts",
  "dev:dashboard": "npx nodemon queues/dashboard.ts",
  "dashboard": "node .build/queues/dashboard.js",
  "worker": "node .build/queues/process.js",
}

@felixmosh There is no easy way (that I know of) for us to point the package.json to my fork because there are no committed dist/ folders in the repo. I'd have to publish my fork to npm just to test a simple change. I think? How do you test changes on a cloud provider without publishing to npm?

What if I set up a sample Nextjs project for you and then you could try deploying to Vercel yourself to see the issue directly? It's entirely free. Also, Vercel wont be the only cloud provider that has this issue. The fact you are using full system paths is a code smell since a cloud provider would never give you access to the fullpath due to security concerns. You'd need to use relative paths.

[felixmosh]

@caseypugh how can we solve this? make the paths relative? How can I debug this issue myself?

[caseypugh]

@felixmosh Easiest thing to do is to sign up for a serverless provider like Vercel and try deploying a sample project yourself. It's 100% free!

And yes, like I said before, I'm pretty sure the solution is to just make the paths relative.

[felixmosh]

@caseypugh but I don't have a public redis service that I can connect to in order to test it....

[felixmosh]

Can someone try with the mentioned solution here? https://github.com/felixmosh/bull-board/issues/485#issuecomment-1414339022

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[samuelcole]

Keeping it alive: still a problem for me

[Uchihinha]

The same here, looking forward for a fix

[samuelcole]

@Uchihinha try this: https://github.com/felixmosh/bull-board/issues/485#issuecomment-1549146066

[Uchihinha]

@samuelcole it worked now, thank you!

[mckernanin]

The issue isn't with vercel's hosting, it's their build step that uses (or operates similarly to) @vercel/ncc. The files don't exist because they aren't referenced, and are stripped from the production build. I'm using ncc for an express deployment, and encountered the same error message.

[rogeriochaves]

For those like me struggling to make it work, I got it working now, thanks to https://github.com/felixmosh/bull-board/issues/485#issuecomment-1549146066 + https://github.com/felixmosh/bull-board/issues/485#issuecomment-1555673004 🎉

this is my full vercel.json file:

{
  "version": 2,
  "rewrites": [
    {
      "source": "/admin/queues",
      "destination": "api/server.js"
    },
    {
      "source": "/admin/queues/(.*)",
      "destination": "api/server.js"
    }
  ],
  "functions": {
    "api/server.js": {
      "includeFiles": "node_modules/@bull-board/ui/**"
    }
  }
}

and this is my createBullBoard call:

createBullBoard({
  queues,
  serverAdapter: serverAdapter,
  options: { uiBasePath: `${process.cwd()}/node_modules/@bull-board/ui` },
});

[Eyon42]

This issue also affects esbuild bundling. I'm trying it for fastify, but it's not working.