CSS Bundle does not work when deployed to Vercel

[dantman]

What version of Remix are you using?

1.17.1

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

I've included a git repo where I have done the following:
https://github.com/dantman/remix-vercel-css-bundled-modules-bug

1. Run npx create-remix@latest
2. Select Just the basics, Vercel, TypeScript
3. Verify that root.tsx contains ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), (css-bundle is pre-configured in the default template)
4. Add CSS using an import that depends on the css-bundle
5. Verify your CSS works locally in npm run dev
6. Deploy to Vercel
7. Check that your CSS is working on the deployed Vercel site

Expected Behavior

Expected Vercel deployment to have same CSS as seen locally.

Actual Behavior

Bundled CSS and module CSS files that load when run in the dev server do not work when deployed to Vercel.

Local: Run npm run dev using https://github.com/dantman/remix-vercel-css-bundled-modules-bug
Vercel Deployment: https://remix-vercel-css-bundled-modules-bug-git-stock-dantman.vercel.app/

[dantman]

From what I can tell it seems like cssBundleHref is not defined when deployed to Vercel.

[markdalgleish]

Looks like this is an issue on the Vercel side due to their Remix-specific build process. I'm currently reaching out to get it resolved. In the meantime I've verified that you should be able to fix this by rolling back to v1.17.0.

[BJvdA]

For me it also breaks on v1.17.0, it seems like v1.18.0 fixes this issue

[markdalgleish]

As noted above, this issue is currently fixed in the latest version.

Since this issue is caused by a version mismatch between @remix-run/css-bundle and Vercel's custom fork of @remix-run/dev which they only run in CI, I recently merged a PR that will go out in Remix v2 that decouples these two packages to avoid this issue re-emerging in the future: #6982.