Cannot find package 'cookie' - Vercel Adapter - hybrid and server outputs

[fabiobiondi]

Astro Info

Astro                    v4.2.3
Node                     v18.17.1 (also tried with Node v20)
System                   macOS (arm64)
Package Manager          unknown
Output                   hybrid
Adapter                  @astrojs/vercel/serverless
Integrations             @astrojs/react
                         @astrojs/tailwind
                         @astrojs/mdx
                         @astrojs/sitemap

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I have migrated a website from Astro v.1 (SSG) to v.4 (hybrid).
There are hundred of images, dozens of markdown and more or less 200 Astro components.

Since I had some problems with the migration I decided to create a brand new project with v.4.2.3.

The astro.config.mjs is pretty simple:

import { defineConfig } from 'astro/config';
import vercelServerless from '@astrojs/vercel/serverless';
import react from "@astrojs/react";
import mdx from "@astrojs/mdx";

// https://astro.build/config
export default defineConfig({
  site: 'https://www.fabiobiondi.dev/',
  output: 'hybrid',
  adapter: vercelServerless(),

  integrations: [react(), mdx()],
});

Using Static Rendering:
the build works fine in both, locally and deployed on Vercel ✅

Using hybrid output:
• dev: works ✅
• production (Vercel) ❌: static pages work fine while when I open pages with export const prerender = false I got this error:

<<
This Serverless Function has crashed.
...

This page just contains the following code:

---
export const prerender = false;
---
hello

Using server output:
• dev: works ✅
• production (Vercel) ❌: all non-static pages have problems

---

This is the error I read from Vercel Logs, when I visit the SSR page:

undefined	ERROR	Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'cookie' imported from /var/task/.vercel/output/_functions/entry.mjs
    at new NodeError (node:internal/errors:405:5)
    at packageResolve (node:internal/modules/esm/resolve:895:9)
    at moduleResolve (node:internal/modules/esm/resolve:988:20)
    at moduleResolveWithNodePath (node:internal/modules/esm/resolve:939:12)
    at defaultResolve (node:internal/modules/esm/resolve:1181:79)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:835: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'

In the .vercel folder I see that the entry.mjs file cannot find the cookie library (but it's available in node_modules folder:

NOTE: I have also tried to install cookie on my project as dependency and peer Dependency

Have you some ideas or advice?
Thank you 🙏

What's the expected result?

SSR pages should work on Vercel

Link to Minimal Reproducible Example

n/a

[github-actions]

Hello @fabiobiondi. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

[ematipico]

Is cookie exported as an ESM module?

[fabiobiondi]

@ematipico
Nope... CJS

I really don't understand what is happening.
A blank hybrid project work fine.
Now I have added re-created a project from scratch and it worked until I migrated a lot of content
I have followed all the migration guides and everything works fine with SSG.

But a BLANK PAGE, with nothing else inside it, just a label, that use SSR instead, has that "cookie" problem!

I will try to create a minimal reproduction project...

[lilnasy]

Could you check whether "astro" is under "dependencies" and not "devDependencies"?

[ematipico]

Try vite.ssr.noExternal: ['cookie'] and see if this works for you

[lilnasy]

Due to a bug I introduced, the vercel serverless adapter does not set cookies but the cookie npm package does not present an issue.

Here is a deployed project that uses Astro.cookies.set("x", "y"), for example: https://basics-livid.vercel.app/

[fabiobiondi]

Could you check whether "astro" is under "dependencies" and not "devDependencies"?

Astro is located in dependencies, just as initially set by the Astro CLI. I move nothing 😅

[fabiobiondi]

Try vite.ssr.noExternal: ['cookie'] and see if this works for you

Just updated the astro.config.mjs but still doesn't work

export default defineConfig({
  site: 'https://www.fabiobiondi.dev/',
  output: 'hybrid',
  adapter: vercelServerless(),

  vite: {
    ssr: {
      noExternal: 'cookie'
    }
  },
  integrations: [react(), mdx()]
});

[fabiobiondi]

Due to a bug I introduced, the vercel serverless adapter does not set cookies but the cookie npm package does not present an issue. Here is a deployed project that uses Astro.cookies.set("x", "y"), for example: https://basics-livid.vercel.app/

I have deployed a basic project too without any problem. It works (a simple project like yours with SSR and SSG pages)
But after adding some stuff I had these problems.
I thought it was my fault or because of some custom configurations I did so I cleaned the astro config as you can see in my previous comment and just created a blank page (that don't use components or stuff) as shown below:

---
export const prerender = false;
---
hello

So I'm not able to reproduce the issue.
Anyway this evening I will try to remove everything except for a couple of pages, hoping there will be the issue. And I will share the repo.

PS: i'm using Astro since version 1.x and created many websites, spoken to several conferences and so on.... so I'm not expert but I'm not a newbie either. So this behavior is very strange

PPS: I and some friend have another weird problem with Astro 4 and Vercel that we had never had but I'll open another issue about it. The CI doesn't work anymore as before: first Git pushes works fine but after a while (don't ask me the reason) we need to make a build locally and push it too in order to see the updates. But that's another story : )

[lilnasy]

Vercel's CI cache or commands could be interfering as well. You could test this by deleting .vercel and going through npm exec vercel deploy prompts to create a new project.

[fabiobiondi]

Try vite.ssr.noExternal: ['cookie'] and see if this works for you

I have tried this again and I have noticed I don't have the error on cookie anymore but on fast-glob, clsx, kleur

2024-01-24T20:56:43.151Z	undefined	ERROR	Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'kleur' imported from /var/task/.vercel/output/_functions/entry.mjs
    at new NodeError (node:internal/errors:405:5)
    at packageResolve (node:internal/modules/esm/resolve:895:9)
    at moduleResolve (node:internal/modules/esm/resolve:988:20)
    at moduleResolveWithNodePath (node:internal/modules/esm/resolve:939:12)
    at defaultResolve (node:internal/modules/esm/resolve:1181:79)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:835: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'
}
INIT_REPORT Init Duration: 211.35 ms	Phase: init	Status: error	Error Type: Runtime.ExitError
2024-01-24T20:56:43.413Z	undefined	ERROR	Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'kleur' imported from /var/task/.vercel/output/_functions/entry.mjs
    at new NodeError (node:internal/errors:405:5)
    at packageResolve (node:internal/modules/esm/resolve:895:9)
    at moduleResolve (node:internal/modules/esm/resolve:988:20)
    at moduleResolveWithNodePath (node:internal/modules/esm/resolve:939:12)
    at defaultResolve (node:internal/modules/esm/resolve:1181:79)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:835: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'
}
INIT_REPORT Init Duration: 256.95 ms	Phase: invoke	Status: error	Error Type: Runtime.ExitError
Error: Runtime exited with error: exit status 1