Skip to content

Updated pnpm lock and fix use npx to call tailwindcss in shiro-types build script - #651

Open
lldxlzy wants to merge 18 commits into
Innei:mainfrom
lldxlzy:main
Open

Updated pnpm lock and fix use npx to call tailwindcss in shiro-types build script#651
lldxlzy wants to merge 18 commits into
Innei:mainfrom
lldxlzy:main

Conversation

@lldxlzy

@lldxlzy lldxlzy commented Aug 20, 2026

Copy link
Copy Markdown
  • I have read the checklist above (put an x in the brackets)

Description

This PR fixes a series of deployment disasters that made me question my life choices over the past few hours. Specifically:

  1. Removed "node": ">=20" from devDependencies: Yes, someone (me) actually put Node.js itself as an npm package dependency. pnpm happily installed node@26.7.0 like it was a normal library, and Vercel cried. Moved to engines where it belongs.
  2. Forced Webpack instead of Turbopack: Turbopack decided ::highlight() is not valid CSS. It's a standard API, but apparently Turbopack in Next.js 16.1.6 disagrees. Added --webpack flag because I don't have time to wait for Turbopack to catch up with 2024.
  3. Fixed tailwindcss: command not found in shiro-types: Works on my machine™, fails in Vercel CI. Classic. Changed to npx tailwindcss because CI environments don't care about your local PATH.
  4. Regenerated pnpm-lock.yaml from scratch: After removing the fake node package and fixing everything else, the lockfile was basically a crime scene. Deleted it and let pnpm start fresh. Now installs 1160 packages correctly instead of 72.

Linked Issues

fixes #649 (and several unreported screams into the void)

AI collaboration

I used Qwen as my debugging partner / emotional support / log analyzer throughout this ordeal. Without it, I would still be staring at ERR_PNPM_OUTDATED_LOCKFILE wondering why Node.js is a devDependency.

1. Workflow

  • Pasted build logs → Qwen diagnosed → I applied fix → Vercel failed again → Repeat × 15
  • Qwen caught things I completely missed (like the fact that installing node as a package was the root cause of EVERYTHING)
  • Used Qwen to draft this PR description because after 3 hours of debugging, my writing skills have degraded to caveman level

2. Prompt (or equivalent task description)

Highlights include:

  • "Why is pnpm installing node@26.7.0 as a dependency? This can't be real." → Qwen: "It's real. You did this."
  • "Turbopack says ::highlight is invalid CSS. Am I crazy?" → Qwen: "No, Turbopack is just behind. Use Webpack."
  • "tailwindcss works locally but not in Vercel. Why does CI hate me?" → Qwen: "Because you're calling it without npx. CI isn't your friend."
  • "Help me write a PR description that doesn't sound like a robot wrote it" → Here we are.

3. Reasoning and trade-offs

  • Webpack > Turbopack (for now): Could upgrade @haklex/rich-editor or wait for Turbopack to support ::highlight, but both options require time I no longer have. Webpack is boring but reliable. Trade-off: builds are ~20% slower, but at least they finish.
  • npx over pnpm exec: pnpm exec would work too, but npx is more universal. If someone ever switches to yarn or bun (please don't), this won't break.
  • What AI caught that I didn't: The connection between the fake node package and workspace resolution failing. I was looking at lockfile errors; Qwen looked at the dependency tree and said "why is Node.js here?" That single insight saved hours.
  • What I verified myself: Every package.json change, ran pnpm install locally 4 times to confirm 1160 packages, tested build commands before pushing. AI suggested, I executed and validated.

Additional context

⚠️ Heads up for reviewers:

  • pnpm-lock.yaml was nuked and rebuilt. If you have uncommitted dependency changes, do not merge this yet. Rebase first or you'll lose work.
  • --webpack is temporary. Once Turbopack supports ::highlight or we update the rich editor, we can remove it. Feel free to open an issue to remind Future Us.
  • No app logic changed. This is purely "make Vercel stop yelling at us" configuration fixes.
  • If local dev builds feel slow, remove --webpack temporarily. Turbopack works fine in dev mode; only production build chokes on the CSS.

🙏 Thanks to whoever reviews this.
QwQ

@safedep

safedep Bot commented Aug 20, 2026

Copy link
Copy Markdown

⚠️ Scan Failed: Pull Request Too Large

This pull request exceeds GitHub's diff limits and cannot be scanned.

GitHub Limits:

  • Maximum 300 files per diff
  • Maximum 1 MB total diff size

Recommendations:

  • Split this PR into smaller, focused changes
  • Review critical dependency changes manually
  • Contact your team if this is blocking your workflow
    This report is generated by SafeDep GitHub App

@vercel

vercel Bot commented Aug 20, 2026

Copy link
Copy Markdown

Someone is attempting to deploy a commit to the Innei's projects Team on Vercel.

A member of the Team first needs to authorize it.

@Innei

Innei commented Aug 24, 2026

Copy link
Copy Markdown
Owner

This is not a correct solution. You can add tailwindcss as a devDependency to its dependencies, and do not use webpack for building.

@lldxlzy

lldxlzy commented Aug 24, 2026

Copy link
Copy Markdown
Author

I don't think not to use webpack is a good thing...
It's lost more time

@lldxlzy

lldxlzy commented Aug 24, 2026

Copy link
Copy Markdown
Author

I fixed it now.
We need to patch rich-editor let the highlight GOES AWAY.
You can see mine blog there:https://blog.ngny0n.top/posts/devlo/Shiro#6__%E4%B8%80%E7%9B%B4%E6%8E%A5%E6%89%93patch%E4%B9%9F%E6%98%AFinnei%E8%80%81%E5%A4%A7%E6%8E%A8%E8%8D%90%E7%9A%84%E6%96%B9%E6%B3%95

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

pnpm的锁太老了,容易卡在Vercel进行install的路上

2 participants