@astro/vercel: Astro emits code that has client:only on SSR since vite 3.2.5, when importsNotUsedAsValues is set

[WesSouza]

What version of astro are you using?

1.7.1 (broke starting on 1.6.13)

Are you using an SSR adapter? If so, which one?

Vercel

What package manager are you using?

pnpm

What operating system are you using?

Mac

Describe the Bug

When using tsconfig.json's "importsNotUsedAsValues": "error" option, as set on packages/astro/tsconfigs/strict.json, building with the @astro/vercel integration emits code for components that have client:only="react" inside the vercel/output/functions/render.func/dist/entry.js serverless function.

That is incorrect and causes the runtime to break when packages are incompatible with server rendering.

With that setting removed, the code is not present.

Working example:

WesSouza/astro-vite-vercel-issue
https://astro-vite-vercel-issue.vercel.app/

Breaking change:

https://github.com/WesSouza/astro-vite-vercel-issue/pull/2
https://astro-vite-vercel-issue-git-broken-wessouza.vercel.app/
Logs are public here

Runtime error on Vercel:

ERROR	Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/var/task/node_modules/date-fns/formatDistanceToNow' is not supported resolving ES modules imported from /var/task/dist/entry.js
Did you mean to import date-fns/formatDistanceToNow/index.js?
    at new NodeError (node:internal/errors:393:5)
    at finalizeResolution (node:internal/modules/esm/resolve:324:17)
    at moduleResolve (node:internal/modules/esm/resolve:965:10)
    at moduleResolveWithNodePath (node:internal/modules/esm/resolve:909:12)
    at defaultResolve (node:internal/modules/esm/resolve:1173:79)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///var/task/node_modules/date-fns/formatDistanceToNow'
}

I suspect that the emitted entry.js code is importing modules that are themselves not added to the build, causing these import errors (there is another one on the original details below).

Original investigation and details

TL;DR: Vercel output broke when vite went from 3.2.4 to 3.2.5, which happened on 1.6.13.

Basically, ever since vite@3.2.5, Astro started adding frotnend code to vercel/dist/entry.js which is breaking the deployment.

This one is a doozy, I've been trying to reproduce it on a clean project but was unable to, so I'm referencing PRs from my own project with the issue.

Setup

• @astro/react and @astro/vercel
• All React components are rendered using client:only="react" because of styled-components
• Tried either Node 16 and 18 on Vercel (current deployments are on Node 16)

Problem 1: import x from "date-fns/x"

Source on this PR: WesSouza/mastodon-flock#7.

This import breaks:

import formatDistanceToNow from 'date-fns/formatDistanceToNow';

Error:

2022-12-17T13:25:06.386Z	undefined	ERROR	Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/var/task/node_modules/date-fns/formatDistanceToNow' is not supported resolving ES modules imported from /var/task/dist/entry.js
Did you mean to import date-fns@2.29.3/node_modules/date-fns/formatDistanceToNow/index.js?
    at new NodeError (node:internal/errors:372:5)
    at finalizeResolution (node:internal/modules/esm/resolve:433:17)
    at moduleResolve (node:internal/modules/esm/resolve:1009:10)
    at defaultResolve (node:internal/modules/esm/resolve:1218:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)
    at link (node:internal/modules/esm/module_job:78:36) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///var/task/node_modules/date-fns/formatDistanceToNow'
}

The file npm:date-fns/formatDistanceToNow/package.json seems correct to me, not sure why this would happen.

I was able to fix this by importing directly from the date-fns package:

import { formatDistanceToNow } from "date-fns";

Problem 2: Astro is trying to run code that has client:only on SSR

Source on this PR: WesSouza/mastodon-flock#8.

I also noticed that the built entry.js file has much more code that was not there previously, especially imports and components that were set to client:only="react".

One thing that broke was styled-components:

2022-12-17T13:51:23.187Z	205a059a-a5f4-4db4-9132-4695c1406888	ERROR	TypeError: styled.a is not a function
    at file:///var/task/dist/entry.js:2107:24
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async getListener (/var/task/___vc/__launcher.js:37:11)

Link to Minimal Reproducible Example

astro@1.6.13: WesSouza/mastodon-flock#7
astro@1.6.13: WesSouza/mastodon-flock#8
astro@1.7.1: WesSouza/mastodon-flock#9

---

I suspect the change that affects me was introduced by vitejs/vite@eba9b42, specifically vitejs/vite#11123, but I'm not sure.

Link to Minimal Reproducible Example

https://github.com/WesSouza/astro-vite-vercel-issue/pull/2

Participation

• I am willing to submit a pull request for this issue.