Skip to content

Upgrade to Next.js 16 + new findable-ui major (Phase 2 from findable-ui#952) #4876

Description

@frano-m

Parent: DataBiosphere/findable-ui#952 (Phase 2 — Next 16 rollout across consumers)
Grandparent: DataBiosphere/findable-ui#884 (Next 16 upgrade plan)

Sibling rollout issues for reference:

Current state

  • next ^15
  • @databiosphere/findable-ui ^53.1.0
  • next-mdx-remote ^5
  • @next/mdx ^15
  • Node 22.12.0 (package.json engines; no .nvmrc)
  • ESLint ^8.57.1, legacy .eslintrc.json
  • overrides: { "glob": "^11.0.4" } present in package.json
  • Uses MDX (@next/mdx, @mdx-js/loader, @mdx-js/react, next-mdx-remote)
  • No next-auth

This is consumer #5 in the rollout order. It has MDX content (app/content/) but no auth, so MDX wiring is the main extra concern over the brain-explorer canary.

Goal

Bump to Next 16 and the new findable-ui major (^54, currently 54.1.0), and align all Next.js-related and ESLint packages with findable-ui's package.json / eslint.config.mjs so this repo stays in lockstep with the library it consumes.

Checklist

Dependencies

  • @databiosphere/findable-ui^54
  • next^16
  • eslint-config-next^16
  • @next/eslint-plugin-next^16
  • next-mdx-remote^6 (non-optional peer dep of findable-ui)
  • @next/mdx^16
  • Install MUI's Emotion helpers (new): npm install @mui/material-nextjs @emotion/server
  • Match remaining peer-dep ranges to findable-ui (react/react-dom ^19.2.3, @mui/material & @mui/icons-material ^7.3.6, uuid ^13, etc.) where they currently lag

Match findable-ui's removed / changed packages

Reconcile our deps against findable-ui 54.1.0 — it moved to ESLint v9 flat config and swapped several plugins. Align ours to match:

  • Remove eslint-plugin-typescript-sort-keys → replace with eslint-plugin-perfectionist ^4 (ESLint v9 compatible)
  • Replace eslint-plugin-eslint-comments ^3@eslint-community/eslint-plugin-eslint-comments ^4
  • eslint ^8^9
  • eslint-plugin-react-hooks ^5^7
  • eslint-plugin-jsdoc ^61^63
  • eslint-plugin-sort-destructure-keys ^2^3
  • Align eslint-plugin-sonarjs to findable-ui's pinned range
  • Add flat-config deps: @eslint/js ^9, @eslint/eslintrc ^3
  • Remove any packages findable-ui dropped that we only carried transitively/for it

Build & runtime wiring

  • Pin builds to webpack: add --webpack to all next dev / next build scripts in package.json (tracking vercel/next.js#82607)
  • Wire pages/_app.tsx: wrap in AppCacheProvider from @mui/material-nextjs/v16-pagesRouter
  • Wire pages/_document.tsx: add DocumentHeadTags + documentGetInitialProps
  • MDX: set blockJS: false on direct next-mdx-remote/serialize calls — present in app/content/common/contentPages.ts and files/common/utils.ts
  • Verify MDX content (app/content/{common,anvil-cmg,lungmap}) renders identically after the next-mdx-remote v6 + @next/mdx v16 bump

Linting

  • Migrate .eslintrc.jsoneslint.config.mjs (flat config); findable-ui's own eslint.config.mjs is the reference. Port existing rules (sort-keys, jsdoc/*, sonarjs/*, explicit-function-return-type override on non-*.styles.ts(x), etc.)
  • Migrate / remove .eslintignore (flat config uses ignores in eslint.config.mjs)
  • Expect lint fallout (sonarjs / react-hooks v7 surfacing pre-existing violations). Triage like hca-atlas-tracker#1360: fix what's quick, file follow-ups for the rest with inline suppressions referencing them, keep npm run lint green

Node baseline → 22.13.0

  • package.json engines.node22.13.0 (matches findable-ui engines.node)
  • Add/update .nvmrc22.13.0
  • Bump Node in CI workflows (.gitlab/ pipelines) and any Dockerfile FROM node:...

Cleanup & audit

  • Remove the overrides: { "glob": ... } block from package.json (lockfile should re-resolve cleanly without it)
  • Run npm audit and address findings — no --force (manual/targeted bumps only)
  • Audit for findable-ui API removals and update call sites:
    • useResetableState hook (removed)
    • superseded prop on FilterTag / CategoryTag (removed)
  • Run npx @next/codemod@canary upgrade latest as a safety net

Verification

  • next build --webpack succeeds for all targets (anvil-catalog, lungmap, anvil-cmg, hca-dcp)
  • npm test (Jest) passes
  • npx playwright test passes
  • No React hydration warnings on MUI-styled pages (confirms Emotion cache wiring)
  • ESLint runs cleanly under flat config
  • Deploy to staging / dev and smoke test

Out of scope

  • next-auth concerns — this consumer doesn't use it.

Acceptance

  • App builds under Next 16 with webpack pinned, all four site targets.
  • findable-ui on ^54; all Next.js-related and ESLint packages aligned with findable-ui.
  • Node baseline at 22.13.0 across package.json, .nvmrc, CI, and Docker.
  • glob override removed; npm audit reviewed (no --force).
  • No hydration warnings; ESLint clean under flat config; MDX renders identically.
  • Staging smoke test passes.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions