github-community-projects / github-community-projects/private-mirrors

Upgrade React to 19, additional major dependency updates (Primer, TanStack, tRPC)

Open
#412 3 comments 0 reactions 1 assignee Claimed by @Miablo View on GitHub
maintenance
Dominant language
TypeScript
Stars
196
Forks
41
Avg merge
1d 9h
Merged PRs (30d)
4

Description

### Is your feature request related to a problem?

Current versions of React, Primer, TanStack, and tRPC are all outdated.

### Describe the solution you'd like

When #409 merges and the project is updated to Next.js 16, these dependencies can then be updated.

Detailed migration plan

## Current State

| Package | Current Version | Target Version |
| ---------------------- | --------------- | -------------- |
| React | 18.3.1 | 19.x |
| React DOM | 18.3.1 | 19.x |
| @primer/react | 36.27.0 | 38.x |
| @primer/octicons-react | 19.15.2 | Latest |
| @tanstack/react-query | 4.36.1 | 5.x |
| @trpc/client | 10.45.3 | 11.x |
| @trpc/react-query | 10.45.3 | 11.x |
| @trpc/server | 10.45.3 | 11.x |
| styled-components | 5.3.11 | 6.x |

## Migration Steps

### 1. Upgrade React to v19

```
npm install react@19 react-dom@19
npm install -D @types/react@19 @types/react-dom@19
```

Breaking Changes:

- useFormState is deprecated in favor of useActionState (not used in this codebase)
- useFormStatus now includes additional keys (data, method, action)
- See

Impact: Low - this codebase does not use useFormState or useFormStatus

### 2. Upgrade styled-components to v6

```
npm install styled-components@6
npm uninstall @types/styled-components # Types are bundled in v6
```

Breaking Changes:

- Improved TypeScript support (types now bundled)
- Some internal API changes
- See

Impact: Low - mostly internal changes

### 3. Upgrade @tanstack/react-query to v5

Run codemod first:
```
npx @tanstack/react-query-codemod@latest v5/all src/
```

Then install:
```
npm install @tanstack/react-query@5
```

Breaking Changes:

- cacheTime → gcTime
- useErrorBoundary → throwOnError
- isLoading → isPending for mutations
- status: 'loading' → status: 'pending'
- Default staleTime is now 0
- See

Files to review after codemod:

- src/providers/TRPCProvider.tsx
- Any files using tRPC queries/mutations

### 4. Upgrade @trpc to v11

Run codemod first:
```
npx @trpc/codemod@latest v11 src/
```

Then install:
```
npm install @trpc/client@11 @trpc/react-query@11 @trpc/server@11
```

Breaking Changes:

- New initialization API
- httpBatchLink changes
- React Query integration updated for v5
- See

Files to review after codemod:

- src/server/trpc.ts - tRPC initialization
- src/server/routers/ - Router definitions
- src/app/api/trpc/[trpc]/route.tsx - tRPC route handler
- src/utils/trpc.ts - tRPC client

### 5. Upgrade @primer/react to v38

```
npm install @primer/react@38 @primer/octicons-react@latest
```

Breaking Changes:

- Component API changes
- Theme/color system updates
- Some components moved from drafts to main export (or vice versa)
- See
- See [Primer React v37 Release](https://github.com/primer/react/discussions/5165)
- See [Primer React v38 Release](https://github.com/primer/react/discussions/7086)
- Removed dependency on `styled-components`, so project needs to adapt to new styling approach
> We’ve removed our dependency on the end-of-life library styled-components. This means some component styling will need to change:
>
> - The `sx` prop is no longer supported. You can style components by providing a `className` and using CSS Modules.
> - Props from `styled-system` are no longer available.
> - Support for theming in JavaScript has been removed.

Files to review:

- src/app/page.tsx
- src/app/[organizationId]/page.tsx
- src/app/[organizationId]/forks/[forkId]/page.tsx
- src/app/not-found.tsx
- src/app/components/dialog/\*.tsx
- src/app/components/header/\*.tsx
- src/app/components/loading/Loading.tsx
- src/app/components/search/\*.tsx

Note: We already migrated from internal lib-esm paths to public export paths (@primer/react and @primer/react/drafts) as part of the Next.js 16 upgrade (TODO: link PR once raised externally), which should reduce the migration effort.

## Post-Upgrade Tasks

1. Enable Turbopack for builds - After upgrading @primer/react to v38, test if Turbopack works and remove the `--webpack` flag from the build script
2. Run full test suite - Verify all tests pass
3. Manual testing - Test the application end-to-end

## Acceptance Criteria

- React upgraded to v19
- styled-components upgraded to v6
- @tanstack/react-query upgraded to v5
- @trpc packages upgraded to v11
- @primer/react upgraded to v38
- All tests pass
- Build succeeds (ideally with Turbopack)
- Application functions correctly in development and production

## References

-
-
-
-
-

### Describe alternatives you've considered

_No response_

### Additional context

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.