Skip to content

Upgrade React from 17 to 19 #10295

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ranm8 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Upgrade React from 17 to 19 #10295

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d696d28
upgraded react
ranm8 Apr 13, 2026
561fc35
Merge branch 'master' of github.com:teambit/bit into ui-react-19-upgrade
ranm8 Apr 14, 2026
8754bc2
added missing files
ranm8 Apr 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .bitmap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1472,6 +1472,13 @@
"mainFile": "index.ts",
"rootDir": "components/renderers/tuple-type"
},
"rendering/ssr": {
"name": "rendering/ssr",
"scope": "teambit.react",
"version": "1.0.3",
"mainFile": "index.ts",
"rootDir": "components/rendering/ssr"
},
Comment thread
GiladShoham marked this conversation as resolved.
"ripple": {
"name": "ripple",
"scope": "teambit.cloud",
Expand Down
23,189 changes: 14,600 additions & 8,589 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

9 changes: 6 additions & 3 deletions scopes/docs/docs/docs-store.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';

// let docs = [];
let root;

export function addDocs(docs: any[]) {
const Doc = docs[0];
ReactDOM.render(<Doc />, document.getElementById('root'));
if (!root) {
root = createRoot(document.getElementById('root')!);
}
root.render(<Doc />);
Comment on lines +4 to +11
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

root is kept as a module-level variable without a type and the #root element is asserted with !. Consider typing the root (Root | undefined) and handling a missing container with a clearer error to avoid hard-to-debug runtime crashes when the docs store is used outside the expected DOM environment.

Copilot uses AI. Check for mistakes.
}
1 change: 0 additions & 1 deletion scopes/react/react/webpack/webpack.config.base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@ export default function (isEnvProduction = false): Configuration {
alias: {
'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime'),
'react/jsx-runtime': require.resolve('react/jsx-runtime'),
'react-dom/server': require.resolve('react-dom/server'),
// Allows for better profiling with ReactDevTools
...(isEnvProductionProfile && {
'react-dom$': 'react-dom/profiling',
Expand Down
12 changes: 7 additions & 5 deletions scopes/react/ui/compositions-app/compositions.app-root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import type { RenderingContext } from '@teambit/preview';

import { CompositionsApp } from './compositions-app';

let root;

/**
* mounts compositions into the DOM in the component preview.
*/
export default (Composition: React.ComponentType, previewContext: RenderingContext) => {
ReactDOM.render(
<CompositionsApp Composition={Composition} previewContext={previewContext} />,
document.getElementById('root')
);
if (!root) {
root = createRoot(document.getElementById('root')!);
}
root.render(<CompositionsApp Composition={Composition} previewContext={previewContext} />);
Comment on lines +7 to +16
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same concern as docs-app: root is untyped and getElementById('root')! assumes the container exists forever. Typing root as Root | undefined, validating the container, and recreating the root if the container changes will make preview mounts more robust.

Copilot uses AI. Check for mistakes.
};
12 changes: 7 additions & 5 deletions scopes/react/ui/docs-app/docs.app-root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import type { DocsRootProps } from '@teambit/docs';
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';

import { DocsApp } from './docs-app';

let root;

function DocsRoot({ componentId, docs, compositions, context }: DocsRootProps) {
ReactDOM.render(
<DocsApp componentId={componentId} docs={docs} compositions={compositions} context={context} />,
document.getElementById('root')
);
if (!root) {
root = createRoot(document.getElementById('root')!);
}
root.render(<DocsApp componentId={componentId} docs={docs} compositions={compositions} context={context} />);
Comment on lines +7 to +13
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

root is currently an untyped module-level variable and the container is assumed to exist via getElementById('root')!. For better safety/maintainability, consider typing this as Root | undefined (import type Root from react-dom/client) and handling the case where #root is missing (throw a clear error). Also consider recreating the root if the container element changes between calls (e.g. during preview re-mounts).

Copilot uses AI. Check for mistakes.
}

// For backward compatibility - can be removed end of 2022
Expand Down
1 change: 0 additions & 1 deletion scopes/ui-foundation/ui/rspack/rspack.common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ export function resolveAlias(opts?: { profile?: boolean }): Record<string, strin
return {
'react/jsx-runtime': require.resolve('react/jsx-runtime'),
react: require.resolve('react'),
'react-dom/server': require.resolve('react-dom/server'),
'react-dom': require.resolve('react-dom'),
...(opts?.profile && {
'react-dom$': 'react-dom/profiling',
Expand Down
41 changes: 20 additions & 21 deletions workspace.jsonc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
"@mdx-js/mdx": "^3.1.1",
"@mdx-js/react": "1.6.22",
"@modelcontextprotocol/sdk": "^1.22.0",
"@monaco-editor/react": "4.4.6",
"@monaco-editor/react": "4.7.0",
"@parcel/watcher": "^2.5.1",
"@pmmmwh/react-refresh-webpack-plugin": "0.5.4",
"@pnpm/client": "1001.1.24",
Expand Down Expand Up @@ -314,7 +314,6 @@
"@teambit/react.instructions.react.adding-compositions": "0.0.7",
"@teambit/react.instructions.react.adding-tests": "0.0.6",
"@teambit/react.jest.react-jest": "^1.0.37",
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@teambit/react.rendering.ssr was removed from the workspace dependency policy, but the codebase still imports it in multiple places (e.g. scopes/react/react/apps/web/ssr/ssr-express.ts, scopes/ui-foundation/ui/ssr-middleware/ssr-middleware.ts, scopes/ui-foundation/ui/ui.ui.runtime.tsx). Unless it’s being provided as a local component, this will likely break installs/builds in pnpm/Bit capsules. Consider re-adding it here or migrating those imports to the replacement SSR package/component as part of this PR.

Suggested change
"@teambit/react.jest.react-jest": "^1.0.37",
"@teambit/react.jest.react-jest": "^1.0.37",
"@teambit/react.rendering.ssr": "^1.0.0",

Copilot uses AI. Check for mistakes.
"@teambit/react.rendering.ssr": "^1.0.3",
"@teambit/react.ui.component-highlighter": "0.2.5",
"@teambit/react.webpack.react-webpack": "^1.0.50",
"@teambit/scope.content.scope-overview": "1.96.8",
Expand Down Expand Up @@ -371,7 +370,7 @@
"@teambit/workspace.ui.empty-workspace": "^0.0.509",
"@teambit/workspace.ui.load-preview": "^0.0.504",
"@testing-library/jest-dom": "5.16.5",
"@testing-library/react": "12.1.5",
"@testing-library/react": "14.3.1",
"@tippyjs/react": "4.2.0",
"@types/archiver": "5.3.1",
"@types/cacache": "19.0.0",
Expand All @@ -386,7 +385,7 @@
"@types/diff": "^5.2.3",
"@types/eslint": "8.56.6",
"@types/eventsource": "^1.1.15",
"@types/express": "4.17.21",
"@types/express": "^4.17.21",
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@types/express was changed from an exact version to a caret range, while most @types/* dependencies in this file are pinned. This can lead to unexpected type changes on reinstall/CI. Consider pinning an exact version (or apply the same range strategy consistently across types).

Suggested change
"@types/express": "^4.17.21",
"@types/express": "4.17.21",

Copilot uses AI. Check for mistakes.
"@types/find-root": "1.1.2",
"@types/fs-extra": "9.0.7",
"@types/graphlib": "2.1.7",
Expand All @@ -410,9 +409,9 @@
"@types/pluralize": "0.0.29",
"@types/prettier": "2.7.3",
"@types/pretty-time": "^1.1.5",
"@types/react": "^17.0.67",
"@types/react": "^19.0.0",
"@types/react-dev-utils": "9.0.15",
"@types/react-dom": "^17.0.21",
"@types/react-dom": "^19.0.0",
"@types/react-syntax-highlighter": "15.5.13",
"@types/react-tabs": "2.3.2",
"@types/sass": "1.45.0",
Expand Down Expand Up @@ -497,7 +496,7 @@
"eventsource": "^2.0.2",
"execa": "2.1.0",
"expose-loader": "3.1.0",
"express": "4.21.2",
"express": "^4.21.0",
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most dependencies in this policy are pinned to exact versions, but express was changed to a caret range (and effectively downgraded from 4.21.2 to ^4.21.0). This reduces reproducibility and can introduce untested minor/patch behavior changes. Consider keeping the exact version pin unless there’s a specific need for a range.

Suggested change
"express": "^4.21.0",
"express": "4.21.2",

Copilot uses AI. Check for mistakes.
"express-graphql": "0.12.0",
"express-history-api-fallback": "2.2.1",
"filenamify": "4.2.0",
Expand Down Expand Up @@ -597,14 +596,14 @@
"prop-types": "^15.8.1",
"punycode": "^2.3.1",
"query-string": "7.0.0",
"react-animate-height": "2.0.23",
"react-animate-height": "3.2.3",
"react-dev-utils": "12.0.1",
"react-docgen": "5.3.1",
"react-error-boundary": "^3.0.0",
"react-error-overlay": "6.0.9",
"react-syntax-highlighter": "15.6.1",
"react-tabs": "3.2.0",
"react-test-renderer": "17.0.2",
"react-test-renderer": "19.1.0",
"reactflow": "^11.11.3",
"read-pkg-up": "7.0.1",
"regenerator-runtime": "0.13.7",
Expand Down Expand Up @@ -673,14 +672,14 @@
"zod": "^3.24.4"
},
"peerDependencies": {
"@apollo/client": "^3.6.0",
"@apollo/client": "^3.12.0",
"@teambit/base-react.navigation.link": "2.0.33",
"@testing-library/react": "^12.1.5",
"@testing-library/react": "^14.3.1",
"core-js": "^3.10.0",
"graphql": "15.8.0",
"mz": "2.7.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react": "19.1.0",
"react-dom": "19.1.0",
Comment on lines 678 to +682
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React/ReactDOM peers are updated to 19.1.0 here, but the SSR app build policy in scopes/react/react/apps/web/react.application.ts#getSsrPolicy() is still pinning react/react-dom to 17.0.2. That will produce SSR bundles running a different React major than the rest of the workspace. Update the SSR policy to React 19 (or document why SSR must remain on 17).

Copilot uses AI. Check for mistakes.
"react-router-dom": "^6.22.3"
}
},
Expand All @@ -699,8 +698,8 @@
// we force the version installed in the root.
"@types/node": "22.10.5",
"signal-exit@4": "^4.0.2",
"@types/react": "^17.0.67",
"@types/react-dom": "^17.0.21",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
// Older versions of cross-spawn have a reported security vulnerability.
"cross-spawn@7": "^7.0.5",
"minio@7.0": "7.1.3",
Expand Down Expand Up @@ -811,23 +810,23 @@
"dependencies": {
"@teambit/base-react.navigation.link": "2.0.33",
"@teambit/ui-foundation.ui.navigation.react-router-adapter": "6.1.3",
"@apollo/client": "3.6.9",
"@apollo/client": "3.12.11",
// for backward compatibility only
"@teambit/legacy": "2.1.0",
// These are the peer dependencies of Yarn
"@yarnpkg/cli": "3.6.1",
"@yarnpkg/core": "3.5.2",
"@yarnpkg/plugin-pack": "3.2.0",
// ensure types/react in correct version in the root of bvm version
"@types/react": "^17.0.67",
"@types/react-dom": "^17.0.21",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"graphql": "15.8.0",
"browserslist": "4.23.3",
"reflect-metadata": "0.1.13",
"monaco-editor": "0.33.0",
"monaco-editor": "0.52.2",
"mz": "2.7.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react": "19.1.0",
"react-dom": "19.1.0",
"core-js": "3.13.0",
// Those are here to make sure we have them in the root with specific versions when installing with bvm
"postcss": "8.4.18",
Expand Down