Next15

[dinmukhamedm]

Work in progress: Next.js 15 migration.

Latest peer dependencies issues:

.
├─┬ @monaco-editor/react 4.6.0
│ ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
│ └── ✕ unmet peer react-dom@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
├─┬ @radix-ui/react-alert-dialog 1.1.3
│ └─┬ @radix-ui/react-dialog 1.1.3
│   └─┬ react-remove-scroll 2.6.0
│     ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
│     ├── ✕ unmet peer @types/react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.1
│     ├─┬ react-style-singleton 2.2.1
│     │ ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
│     │ └── ✕ unmet peer @types/react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.1
│     ├─┬ react-remove-scroll-bar 2.3.6
│     │ ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
│     │ └── ✕ unmet peer @types/react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.1
│     ├─┬ use-callback-ref 1.3.2
│     │ ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
│     │ └── ✕ unmet peer @types/react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.1
│     └─┬ use-sidecar 1.1.2
│       ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
│       └── ✕ unmet peer @types/react@"^16.9.0 || ^17.0.0 || ^18.0.0": found 19.0.1
├─┬ react-ace 13.0.0
│ ├── ✕ unmet peer react@"^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0": found 19.0.0
│ └── ✕ unmet peer react-dom@"^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0": found 19.0.0
├─┬ react-day-picker 8.10.1
│ └── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
├─┬ reactflow 11.11.4
│ └─┬ @reactflow/minimap 11.7.14
│   └─┬ zustand 4.5.5
│     └─┬ use-sync-external-store 1.2.2
│       └── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
├─┬ recharts 2.15.0
│ └─┬ react-smooth 4.0.3
│   ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
│   └── ✕ unmet peer react-dom@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
└─┬ swr 2.2.5
  └── ✕ unmet peer react@"^16.11.0 || ^17.0.0 || ^18.0.0": found 19.0.0

TODOs:

• Test Yjs together for realtime
• More thorough testing of all pages, buttons, etc.
• Manual testing of calendar element for that react-day-picker is old
• Fix the above dependency issues when they become available

Dependency issues that we will likely be able to fix:

• monaco-editor react 19 support should be out next week Plans for React v19 Support suren-atoyan/monaco-react#656
• react-ace. Unknown, track: Allow peer dependency for React 19 securingsincity/react-ace#2080
• reactflow. Looks like React 19 should be supported in version 12, though it's not clear when v12 will be ready if at all
• recharts. Dependency comes from react-smooth. Unknown, track: React 19 support recharts/react-smooth#106
• swr. This will be fixed in version 2.2.6 (currently at 2.2.6-beta.4). https://github.com/vercel/swr/releases

Dependency issues that will probs need some more time

• @radix-ui/react-alert-dialog is dependent on react-remove-scroll, which doesn't look like it will support React 19 soon: React 19 support theKashey/react-remove-scroll#122
• react-day-picker is used by shadcn Calendar. The shadcn existing components registry doesn't look very much maintained, and upgrading to react-day-picker@9 is not immediately straightforward. Track [bug]: Calender UI is messed up after updating to react-day-picker shadcn-ui/ui#5799
• (node:86854) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead. The dependency path to it is [email protected] -> @eslint/[email protected] -> [email protected] -> [email protected] -> [email protected]. And eslintrc is a legacy package for support of .eslintrc.json configurations. On a related note, I opened Migrate from .eslintrc.json to eslint.config.js #278. Looks like the closest to tracking issue is this: DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead. eslint/eslint#19007 and it has links to workaround suggestions abour overriding uri-js with fasturi.

---

Important

Migrate to Next.js 15 by updating API routes, handling async params, upgrading dependencies, and making code adjustments.

• Behavior:
  • Update API routes to handle params as Promise in route.ts files across multiple directories.
  • Adjust generateMetadata and page components to handle params as Promise in page.tsx files.
  • Add Suspense for PostHogPageView in layout.tsx.
• Dependencies:
  • Upgrade react and react-dom to 19.0.0 in package.json.
  • Update @aws-sdk/client-s3, @codemirror/language, @supabase/supabase-js, and other dependencies to latest versions.
  • Remove use-enter-submit.tsx hook.
• Misc:
  • Add serverExternalPackages: ["yjs"] in next.config.js.
  • Fix use-previous.tsx to initialize useRef with null.
  • Minor UI adjustments in calendar.tsx and avatar-menu.tsx.

^{This description was created by for 3b649cc. It will automatically update as commits are pushed.}

[dinmukhamedm]

This will also hopefully eventually address #49. For now, ironically, it adds even more unmet peer dependencies warnings

[dinmukhamedm]

a simple pnpm update fixed some of them. Latest peer deps issue list:

.
├─┬ @monaco-editor/react 4.6.0
│ ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
│ └── ✕ unmet peer react-dom@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
├─┬ react-ace 13.0.0
│ ├── ✕ unmet peer react@"^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0": found 19.0.0
│ └── ✕ unmet peer react-dom@"^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0": found 19.0.0
├─┬ react-day-picker 8.10.1
│ └── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
├─┬ reactflow 11.11.4
│ └─┬ @reactflow/minimap 11.7.14
│   └─┬ zustand 4.5.5
│     └─┬ use-sync-external-store 1.2.2
│       └── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
└─┬ swr 2.2.5
  └── ✕ unmet peer react@"^16.11.0 || ^17.0.0 || ^18.0.0": found 19.0.0

[dinmukhamedm]

After a few more pnpm updates, the state is the following:

 WARN  Issues with peer dependencies found
.
├─┬ @monaco-editor/react 4.6.0
│ ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
│ └── ✕ unmet peer react-dom@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0
├─┬ react-ace 13.0.0
│ ├── ✕ unmet peer react@"^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0": found 19.0.0
│ └── ✕ unmet peer react-dom@"^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0": found 19.0.0
└─┬ react-day-picker 8.10.1
  └── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0

@monaco-editor/react will be fixed in 4.7.0 (currently in RC), see the issue linked above

react-ace, see the issue above, no progress so far

react-day-picker we explicitly depend on v8, but v9 breaks the shadcn calendar, so still a TODO

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to 3b649cc in 1 minute and 29 seconds

More details

• Looked at 2400 lines of code in 94 files
• Skipped 1 files when reviewing.
• Skipped posting 8 drafted comments based on config settings.

1. frontend/app/api/projects/[projectId]/traces/route.ts:7

• Draft comment:
  The use of Promise for params in the function signature is unnecessary. Directly destructure params from props without using Promise. This issue is present in multiple files.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  This is a Next.js API route, and in Next.js 13+, dynamic route parameters can be async. The Promise wrapper around params is actually correct for Next.js API routes with dynamic segments. The comment is suggesting a change that would break the functionality.
  Maybe there's a better way to handle async params that I'm not aware of? Maybe this is an older version of Next.js where this pattern isn't needed?
  The Promise type is part of Next.js's API route specification for dynamic routes. The current implementation follows Next.js best practices.
  The comment should be deleted because it's suggesting a change that would break the functionality. The Promise type is correct and necessary here.

2. frontend/app/api/projects/[projectId]/traces/metrics/route.ts:7

• Draft comment:
  The use of Promise for params in the function signature is unnecessary. Directly destructure params from props without using Promise. This issue is present in multiple files.
• Reason this comment was not posted:
  Marked as duplicate.

3. frontend/app/api/projects/[projectId]/traces/workshop/[pipelineVersionId]/route.ts:7

• Draft comment:
  The use of Promise for params in the function signature is unnecessary. Directly destructure params from props without using Promise. This issue is present in multiple files.
• Reason this comment was not posted:
  Marked as duplicate.

4. frontend/app/api/projects/[projectId]/traces/[traceId]/route.ts:7

• Draft comment:
  The use of Promise for params in the function signature is unnecessary. Directly destructure params from props without using Promise. This issue is present in multiple files.
• Reason this comment was not posted:
  Marked as duplicate.

5. frontend/app/api/projects/[projectId]/templates/route.ts:7

• Draft comment:
  The use of Promise for params in the function signature is unnecessary. Directly destructure params from props without using Promise. This issue is present in multiple files.
• Reason this comment was not posted:
  Marked as duplicate.

6. frontend/app/api/projects/[projectId]/spans/route.ts:7

• Draft comment:
  The use of Promise for params in the function signature is unnecessary. Directly destructure params from props without using Promise. This issue is present in multiple files.
• Reason this comment was not posted:
  Marked as duplicate.

7. frontend/app/api/projects/[projectId]/spans/metrics/summary/route.ts:7

• Draft comment:
  The use of Promise for params in the function signature is unnecessary. Directly destructure params from props without using Promise. This issue is present in multiple files.
• Reason this comment was not posted:
  Marked as duplicate.

8. frontend/app/api/projects/[projectId]/spans/metrics/time/route.ts:7

• Draft comment:
  The use of Promise for params in the function signature is unnecessary. Directly destructure params from props without using Promise. This issue is present in multiple files.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_kN0EhkalFdEpw9MN

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.