Migrate development environment to Turbopack

[vinzee]

Summary

Transition the local development server from Webpack to Turbopack to significantly improve build performance and hot-reloading speed.

Also update global style declarations to ensure compatibility with the new bundler's CSS compilation requirements.

Screenshots or video

N/A — non-UI change

How to test on Vercel preview

N/A — non-UI change

References

• Linear Issue: N/A
• Related PRs: N/A

[changeset-bot]

🦋 Changeset detected

Latest commit: c753a26

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@hyperdx/app	Patch
@hyperdx/api	Patch
@hyperdx/otel-collector	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

@vinzee is attempting to deploy a commit to the HyperDX Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Deep Review

✅ No critical issues found. The diff is a tight, well-documented bundler swap: dev moves to Turbopack, prod stays on Webpack, one SCSS file gets a Turbopack-compatible rewrite, and @hyperdx/api externalization moves to bundler-agnostic serverExternalPackages. The risks are dev-experience and verification gaps, not production correctness.

🟡 P2 -- recommended

• packages/app/next.config.mjs:51 -- serverExternalPackages: ['@hyperdx/api'] replaces a webpack-externals callback that explicitly matched both @hyperdx/api and any @hyperdx/api/<subpath> request, and the sole consumer (packages/app/pages/api/[...all].ts:25) does require('@hyperdx/api/build/serverless'); if Turbopack's prefix matching ever resolves the dead inline branch's subpath, dev startup pulls in passport-saml/mongoose/AWS SDK -- the exact regression the externalization aims to prevent.
  • Fix: Run next build --webpack and next dev --turbopack with HDX_PREVIEW_INLINE_API unset and grep .next/server/** for passport-saml, mongoose, and @aws-sdk to confirm subpath externalization holds under both bundlers before merge.
  • _{correctness, testing}
• packages/app/playwright.config.ts:92-106 -- CI never invokes --turbopack (Playwright dev mode hardcodes next dev --webpack, and the static build job uses --webpack), so the SCSS rewrite and Turbopack startup -- the entire point of this PR -- are verified only by developers running yarn dev locally.
  • Fix: Add a lightweight CI job that runs next dev --turbopack against /search long enough to detect compile errors, or switch the Playwright --dev runner to --turbopack so e2e exercises the bundler developers actually use.
  • _testing
• packages/app/next.config.mjs:40-46 -- No automated assertion guards that @hyperdx/api and its subpaths stay out of .next/server/** after the externalization rewrite; a future config or Next.js regression would silently bundle the heavy transitive deps with no failing signal.
  • Fix: Add a build-output check to the existing static-build job that fails if passport-saml, mongoose, or @aws-sdk strings appear in .next/server/** when HDX_PREVIEW_INLINE_API is unset.
  • _testing

🔵 P3 nitpicks (4)

• agent_docs/development.md:270-274 -- Doc still says next.config.mjs "adds a webpack externals rule that marks @hyperdx/api as a CommonJS external", but this PR deletes that callback and replaces it with serverExternalPackages.
  • Fix: Update the Vercel Preview Deployments section to describe the serverExternalPackages entry gated on HDX_PREVIEW_INLINE_API !== 'true' as the bundler-agnostic mechanism for both Webpack production builds and Turbopack dev.
  • _{correctness, project-standards}
• packages/app/package.json:9 -- The new "//bundler" documentation key is the only //-prefixed key in any package.json in the repo and duplicates the rationale already in next.config.mjs, creating two prose copies that must stay in sync.
  • Fix: Drop the JSON key and rely on the next.config.mjs comment as the single source of truth, or document this //-key idiom in AGENTS.md so future contributors know it is sanctioned.
  • _{maintainability, project-standards}
• packages/app/styles/SearchPage.module.scss:1-39 -- Nothing prevents a future *.module.scss from reintroducing the nested :global { ... } form that Turbopack rejects; because CI runs only Webpack, such a file would compile cleanly in CI and break only for whichever developer runs yarn dev next.
  • Fix: Add a stylelint rule or a grep-based CI check that rejects :global\s*\{ inside packages/app/**/*.module.scss.
  • _testing
• packages/app/styles/SearchPage.module.scss:14-39 -- The Mantine TextInput wrapper/input/placeholder/focus styles have no Storybook, Jest, or Playwright coverage, so the :global { ... } -> :global(.selector) rewrite is verified only by eyeballing it.
  • Fix: Add at least one Playwright assertion (getComputedStyle or a focused screenshot) over the search input area so the SCSS rewrite is regression-tested under whichever bundler CI exercises.
  • _testing

---

Reviewers (4): correctness, testing, maintainability, project-standards.

Testing gaps:

• No CI lane exercises next dev --turbopack, so Turbopack-only failures (CSS Modules, externals) are only caught locally.
• No bundle-content guard ensures @hyperdx/api stays external in non-inline server bundles.
• No visual or computed-style assertion covers the SCSS selectors rewritten in this PR.

[brandon-pereira]

When I run this branch locally, I get this error. It's still trying to compile the require('@hyperdx/api/build/serverless'); path for me locally I believe.

Are you getting that?