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: 6b3c34a

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?

[vinzee]

addressed it.

[greptile-apps]

Greptile Summary

This PR migrates the local development server from Webpack to Turbopack (--turbopack in dev/dev:local) while keeping production builds on Webpack (--webpack), and updates the codebase to be compatible with Turbopack's stricter CSS Modules and module-resolution behaviour.

• Bundler split: dev/dev:local now use --turbopack for faster HMR; build/build:clickhouse keep --webpack for production parity. A \"//bundler\" comment in package.json documents why the two scripts diverge.
• CSS Modules fix: Nested :global {} blocks in SearchPage.module.scss are refactored to per-selector :global(.foo) calls, which is the Turbopack-compatible form; compiled specificity is unchanged.
• @hyperdx/api externalization: The externalization moves to serverExternalPackages (respected by both bundlers) and the webpack externals callback is kept as belt-and-suspenders for subpath imports. The require() in [...all].ts is replaced with await import() carrying both webpackIgnore and turbopackIgnore magic comments so neither bundler attempts to bundle the inline API at analysis time.

Confidence Score: 5/5

Safe to merge — the bundler split is clearly documented, CSS module changes are functionally equivalent, and the @hyperdx/api externalization is covered by multiple overlapping mechanisms.

All changes are well-scoped: dev scripts switch to Turbopack while production builds remain on Webpack, the CSS refactor preserves compiled specificity, and the dynamic import magic comments ensure neither bundler ever bundles the inline API module at analysis time. No runtime behaviour changes in production code paths.

packages/app/next.config.mjs — the webpack externals callback lacks a comment explaining its role alongside serverExternalPackages, which could confuse future readers.

Important Files Changed

Filename	Overview
.changeset/solid-pigs-rhyme.md	New changeset file documenting the Webpack → Turbopack dev migration as a patch release.
packages/app/next.config.mjs	Moves @hyperdx/api externalization from webpack.externals to serverExternalPackages (works with both bundlers). Webpack externals callback is kept as belt-and-suspenders for subpath coverage; comments clarified but the webpack section now lacks inline rationale for why it coexists with serverExternalPackages.
packages/app/package.json	dev and dev:local scripts switched from --webpack to --turbopack; production build scripts retain --webpack for parity; a bundler-comment field documents the split strategy.
packages/app/pages/api/[...all].ts	require() replaced with dynamic import() carrying both webpackIgnore and turbopackIgnore magic comments; handler is correctly extracted with default ?? module fallback for CJS/ESM interop.
packages/app/styles/SearchPage.module.scss	Nested :global {} block replaced with individual :global(.selector) calls to fix Turbopack CSS Modules parsing; compiled specificity is equivalent and the fix is correct.

Sequence Diagram

%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
    participant Dev as Developer
    participant Next as Next.js Dev Server
    participant TB as Turbopack (dev)
    participant WP as Webpack (build)
    participant API as API Handler [...all].ts

    Dev->>Next: next dev --turbopack
    Next->>TB: Bundle app (CSS Modules, TS, SCSS)
    TB-->>Next: Fast HMR, :global(.selector) CSS supported

    Dev->>Next: next build --webpack
    Next->>WP: Production bundle
    WP-->>Next: "serverExternalPackages + externals cb exclude @hyperdx/api"

    Note over API: At runtime (HDX_PREVIEW_INLINE_API=true)
    API->>API: await import(turbopackIgnore + webpackIgnore)
    API-->>API: inlineApi.default ?? inlineApi → handler(req, res)

    Note over API: At runtime (HDX_PREVIEW_INLINE_API=false)
    API->>API: createProxyMiddleware → proxy to external API service

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
    participant Dev as Developer
    participant Next as Next.js Dev Server
    participant TB as Turbopack (dev)
    participant WP as Webpack (build)
    participant API as API Handler [...all].ts

    Dev->>Next: next dev --turbopack
    Next->>TB: Bundle app (CSS Modules, TS, SCSS)
    TB-->>Next: Fast HMR, :global(.selector) CSS supported

    Dev->>Next: next build --webpack
    Next->>WP: Production bundle
    WP-->>Next: "serverExternalPackages + externals cb exclude @hyperdx/api"

    Note over API: At runtime (HDX_PREVIEW_INLINE_API=true)
    API->>API: await import(turbopackIgnore + webpackIgnore)
    API-->>API: inlineApi.default ?? inlineApi → handler(req, res)

    Note over API: At runtime (HDX_PREVIEW_INLINE_API=false)
    API->>API: createProxyMiddleware → proxy to external API service

Loading

_{Reviews (2): Last reviewed commit: "Migrate development environment to Turbo..." | Re-trigger Greptile}