teambit · GiladShoham · May 19, 2026 · Apr 13, 2026 · Apr 14, 2026 · Apr 15, 2026
diff --git a/components/ui/avatar/org-avatar.tsx b/components/ui/avatar/org-avatar.tsx
@@ -37,15 +37,13 @@ export function OrgAvatar({
      {...rest}
    >
      {profileImageWithParams && (
-        <img
-          src={profileImageWithParams}
-          className={classNames(styles.avatarImg, imgClassName)}
-        />
+        <img src={profileImageWithParams} className={classNames(styles.avatarImg, imgClassName)} />
+      )}
+      {!profileImage && (
+        <span className={styles.defaultAvatar}>
+          <i className="bitcon-organization" style={{ fontSize: `${fontSize}px`, lineHeight: `${size}px` }} />
+        </span>
      )}
-      {!profileImage && 
-      <span className={styles.defaultAvatar}>
-        <i className="bitcon-organization" style={{ fontSize: `${fontSize}px`, lineHeight: `${size}px` }} />
-      </span>}
      {children}
    </div>
  );

diff --git a/components/ui/code-compare/code-compare-view/code-compare-view.tsx b/components/ui/code-compare/code-compare-view/code-compare-view.tsx
@@ -49,10 +49,13 @@ export function CodeCompareView({
  fileIconSlot,
  widgets,
 }: CodeCompareViewProps) {
-  const monacoRef = useRef<{
-    editor?: any;
-    monaco?: Monaco;
-  }>();
+  const monacoRef = useRef<
+    | {
+        editor?: any;
+        monaco?: Monaco;
+      }
+    | undefined
+  >(undefined);
  const {
    baseId,
    compareId,

diff --git a/components/ui/code-view/code-view.tsx b/components/ui/code-view/code-view.tsx
@@ -77,7 +77,7 @@ function joinPaths(base: string, relative: string) {
  return newPath.startsWith('/') ? newPath : `/${newPath}`;
 }

-function useInViewport(ref: React.RefObject<HTMLElement>) {
+function useInViewport(ref: React.RefObject<HTMLElement | null>) {
  const [isInViewport, setIsInViewport] = React.useState(false);

  React.useEffect(() => {

diff --git a/components/ui/time-ago/time-ago.tsx b/components/ui/time-ago/time-ago.tsx
@@ -28,7 +28,7 @@ export function TimeAgo({ date, tooltip, className, ...rest }: TimeAgoProps) {
    return timeAgo(date);
  }, [date, refreshIdx]);

-  const wrapWithTooltip = (element: JSX.Element) => {
+  const wrapWithTooltip = (element: React.JSX.Element) => {
    if (tooltip === undefined) return element;

    return (

diff --git a/e2e/harmony/dependency-resolver.e2e.ts b/e2e/harmony/dependency-resolver.e2e.ts
@@ -76,8 +76,8 @@ describe('dependency-resolver extension', function () {
          barFooOutput = helper.command.showComponentParsed('bar/foo');
        });
        it('should have the updated dependencies for bar/foo from the env', function () {
-          expect(barFooOutput.peerPackageDependencies).to.have.property('react', '^16.8.0 || ^17.0.0');
-          expect(barFooOutput.devPackageDependencies).to.have.property('@types/react', '^17.0.8');
+          expect(barFooOutput.peerPackageDependencies).to.have.property('react', '^17.0.0 || ^18.0.0 || ^19.0.0');
+          expect(barFooOutput.devPackageDependencies).to.have.property('@types/react', '^19.0.0');
        });
      });
      describe('policies added by custom env', function () {

diff --git a/e2e/harmony/root-components.e2e.ts b/e2e/harmony/root-components.e2e.ts
@@ -1457,7 +1457,7 @@ module.exports.default = {
            'react/package.json',
          ])
        ).version
-      ).to.match(/^17\./);
+      ).to.match(/^19\./);
      expect(
        fs.readJsonSync(
          resolveFrom(path.join(scopeAspectsCapsulesRootDir, `${helper.scopes.remote}_main-aspect@0.0.2`), [
@@ -1466,7 +1466,7 @@ module.exports.default = {
            'react/package.json',
          ])
        ).version
-      ).to.match(/^17\./);
+      ).to.match(/^19\./);
    });
  });
  describe('using pnpm', () => {
@@ -1492,7 +1492,7 @@ module.exports.default = {
            'react/package.json',
          ])
        ).version
-      ).to.match(/^17\./);
+      ).to.match(/^19\./);
      expect(
        fs.readJsonSync(
          resolveFrom(path.join(scopeAspectsCapsulesRootDir, `${helper.scopes.remote}_main-aspect@0.0.2`), [
@@ -1501,7 +1501,7 @@ module.exports.default = {
            'react/package.json',
          ])
        ).version
-      ).to.match(/^17\./);
+      ).to.match(/^19\./);
    });
  });
  after(() => {

diff --git a/scopes/cloud/cloud/cloud.ui.runtime.tsx b/scopes/cloud/cloud/cloud.ui.runtime.tsx
@@ -121,7 +121,7 @@ export class CloudUI {
                    label: 'Bit Community Slack',
                    link: 'https://join.slack.com/t/bit-dev-community/shared_invite/zt-29pmawrp1-ehfEzYbQyuAC3CNA_jYPvA',
                  },
-                ],
+                ] as any,
              }}
            />
          );
@@ -160,7 +160,7 @@ export class CloudUI {
                    icon: currentName === 'dark' ? 'checkmark' : '',
                    onClick: () => setIfDifferent(dark),
                  },
-                ],
+                ] as any,
              }}
            />
          );

diff --git a/scopes/cloud/ui/user-bar/user-bar.tsx b/scopes/cloud/ui/user-bar/user-bar.tsx
@@ -66,9 +66,9 @@ export function UserBar({ sections = [], items = [] }: UserBarProps) {
          link: href,
          component: Component ? <Component key={index} user={currentUser} /> : undefined,
        };
-      }),
+      }) as any,
    };
-  });
+  }) as unknown as MenuItemType[];

  const logoutItem: MenuItemType = {
    label: 'logout',
@@ -87,7 +87,7 @@ export function UserBar({ sections = [], items = [] }: UserBarProps) {
            });
        },
      },
-    ],
+    ] as any,
  };

  const userDetails: MenuItemType = {

diff --git a/scopes/component/graph/ui/dependencies-compare/dependencies-compare.tsx b/scopes/component/graph/ui/dependencies-compare/dependencies-compare.tsx
@@ -26,7 +26,7 @@ function ComponentNodeContainer(props: NodeProps) {

 export function DependenciesCompare() {
  const nodeTypes: NodeTypes = React.useMemo(() => ({ ComponentNode: ComponentNodeContainer }), []);
-  const graphRef = useRef<ReactFlowInstance>();
+  const graphRef = useRef<ReactFlowInstance | undefined>(undefined);
  const componentCompare = useComponentCompare();

  const baseId = componentCompare?.base?.model.id;

diff --git a/scopes/component/graph/ui/dependencies-graph/dependencies-graph.tsx b/scopes/component/graph/ui/dependencies-graph/dependencies-graph.tsx
@@ -51,7 +51,7 @@ export function DependenciesGraph({
  ...rest
 }: DependenciesGraphProps) {
  const nodeTypes: NodeTypes = React.useMemo(() => ({ ComponentNode: ComponentNodeContainer }), []);
-  const graphRef = useRef<ReactFlowInstance>();
+  const graphRef = useRef<ReactFlowInstance | undefined>(undefined);
  const elements = calcElements(graph, { rootNode });
  const [nodes, setNodes] = useNodesState(elements.nodes);


diff --git a/scopes/compositions/compositions/ui/compositions-panel/use-overlay.ts b/scopes/compositions/compositions/ui/compositions-panel/use-overlay.ts
@@ -14,7 +14,7 @@ export type OverlayStyle = {
 const GAP = 4;

 export function useOverlay(
-  anchorRef: React.RefObject<HTMLElement>,
+  anchorRef: React.RefObject<HTMLElement | null>,
  open: boolean,
  gap: number = GAP,
  extraStyle?: React.CSSProperties

diff --git a/scopes/docs/docs/docs-store.tsx b/scopes/docs/docs/docs-store.tsx
@@ -1,9 +1,29 @@
 import React from 'react';
-import ReactDOM from 'react-dom';

-// let docs = [];
+type Root = { render: (element: React.ReactElement) => void };
+let root: Root | undefined;
+
+function createCompatRoot(container: HTMLElement): Root {
+  try {
+    // React 18+: react-dom/client exists and exports createRoot
+    // eslint-disable-next-line import/no-extraneous-dependencies
+    return require('react-dom/client').createRoot(container);
+  } catch {
+    // React 17 fallback: react-dom/client does not exist
+    // eslint-disable-next-line import/no-extraneous-dependencies
+    const ReactDOM = require('react-dom');
+    return {
+      render: (element) => {
+        ReactDOM.render(element, container);
+      },
+    };
+  }
+}

 export function addDocs(docs: any[]) {
  const Doc = docs[0];
-  ReactDOM.render(<Doc />, document.getElementById('root'));
+  if (!root) {
+    root = createCompatRoot(document.getElementById('root')!);
+  }
+  root.render(<Doc />);
 }
diff --git a/scopes/docs/docs/docs.ts b/scopes/docs/docs/docs.ts
@@ -5,7 +5,7 @@ export type Example = {
  title?: string;
  description?: ReactElement;
  scope?: { [key: string]: any };
-  jsx?: JSX.Element;
+  jsx?: React.JSX.Element;
  code: string;
 };


diff --git a/scopes/harmony/aspect/aspect.env.ts b/scopes/harmony/aspect/aspect.env.ts
@@ -188,15 +188,15 @@ export class AspectEnv implements DependenciesEnv, PackageEnv, PreviewEnv {
        'react-dom': '-',
        '@types/mocha': '-',
        '@types/node': '12.20.4',
-        '@types/react': '^17.0.8',
-        '@types/react-dom': '^17.0.5',
+        '@types/react': '^19.0.0',
+        '@types/react-dom': '^19.0.0',
        '@types/jest': '^26.0.0',
        '@types/testing-library__jest-dom': '5.9.5',
      },
      peerDependencies: {
        // TODO: check if we really need react for aspects (maybe for ink support)
-        react: '^16.8.0 || ^17.0.0',
-        'react-dom': '^16.8.0 || ^17.0.0',
+        react: '^17.0.0 || ^18.0.0 || ^19.0.0',
+        'react-dom': '^17.0.0 || ^18.0.0 || ^19.0.0',
      },
    };
  }

diff --git a/scopes/harmony/node/node.env.ts b/scopes/harmony/node/node.env.ts
@@ -41,14 +41,14 @@ export class NodeEnv implements DependenciesEnv, PackageEnv {
        {
          name: 'react',
          /* the version to be installed and used by the env */
-          version: '^17.0.0',
+          version: '^19.0.0',
          /* the range of versions this env's components are compatible with */
          supportedRange: '^17.0.0 || ^18.0.0 || ^19.0.0',
        },
        {
          name: 'react-dom',
          /* the version to be installed and used by the env */
-          version: '^17.0.0',
+          version: '^19.0.0',
          /* the range of versions this env's components are compatible with */
          supportedRange: '^17.0.0 || ^18.0.0 || ^19.0.0',
        },

diff --git a/scopes/react/react/react.env.ts b/scopes/react/react/react.env.ts
@@ -515,16 +515,16 @@ export class ReactEnv
        'react-dom': '-',
        '@types/mocha': '-',
        '@types/node': '12.20.4',
-        '@types/react': '^17.0.8',
-        '@types/react-dom': '^17.0.5',
+        '@types/react': '^19.0.0',
+        '@types/react-dom': '^19.0.0',
        '@types/jest': '^26.0.0',
        // This is added as dev dep since our jest file transformer uses babel plugins that require this to be installed
        '@babel/runtime': '7.20.0',
        '@types/testing-library__jest-dom': '5.9.5',
      },
      peerDependencies: {
-        react: '^16.8.0 || ^17.0.0',
-        'react-dom': '^16.8.0 || ^17.0.0',
+        react: '^17.0.0 || ^18.0.0 || ^19.0.0',
+        'react-dom': '^17.0.0 || ^18.0.0 || ^19.0.0',
      },
    };
  }

diff --git a/scopes/react/react/webpack/webpack.config.base.ts b/scopes/react/react/webpack/webpack.config.base.ts
@@ -80,7 +80,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',

diff --git a/scopes/react/ui/compositions-app/compositions.app-root.tsx b/scopes/react/ui/compositions-app/compositions.app-root.tsx
@@ -1,15 +1,34 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import type { RenderingContext } from '@teambit/preview';

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

+type Root = { render: (element: React.ReactElement) => void };
+let root: Root | undefined;
+
+function createCompatRoot(container: HTMLElement): Root {
+  try {
+    // React 18+: react-dom/client exists and exports createRoot
+    // eslint-disable-next-line import/no-extraneous-dependencies
+    return require('react-dom/client').createRoot(container);
+  } catch {
+    // React 17 fallback: react-dom/client does not exist
+    // eslint-disable-next-line import/no-extraneous-dependencies
+    const ReactDOM = require('react-dom');
+    return {
+      render: (element) => {
+        ReactDOM.render(element, container);
+      },
+    };
+  }
+}
+
 /**
 * 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 = createCompatRoot(document.getElementById('root')!);
+  }
+  root.render(<CompositionsApp Composition={Composition} previewContext={previewContext} />);
 };
diff --git a/scopes/react/ui/docs-app/docs-theme.tsx b/scopes/react/ui/docs-app/docs-theme.tsx
@@ -1,13 +1,13 @@
 // import 'reset-css'; // do not include resets, we want compositions with native behavior
-import React from 'react';
+import React, { type ReactNode } from 'react';
 import classNames from 'classnames';
 // import { ThemeContext } from '@teambit/documenter.theme.theme-context';
 import { ThemeSwitcher } from '@teambit/design.themes.theme-toggler';
 import { IconFont } from '@teambit/design.theme.icons-font';
 import styles from './docs-app.module.scss';

 export type DocsAppProps = {
-  children: React.ReactChild;
+  children: ReactNode;
 };

 export function DocsTheme({ children }: DocsAppProps) {

diff --git a/scopes/react/ui/docs-app/docs.app-root.tsx b/scopes/react/ui/docs-app/docs.app-root.tsx
@@ -1,14 +1,33 @@
 import type { DocsRootProps } from '@teambit/docs';
 import React from 'react';
-import ReactDOM from 'react-dom';

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

+type Root = { render: (element: React.ReactElement) => void };
+let root: Root | undefined;
+
+function createCompatRoot(container: HTMLElement): Root {
+  try {
+    // React 18+: react-dom/client exists and exports createRoot
+    // eslint-disable-next-line import/no-extraneous-dependencies
+    return require('react-dom/client').createRoot(container);
+  } catch {
+    // React 17 fallback: react-dom/client does not exist
+    // eslint-disable-next-line import/no-extraneous-dependencies
+    const ReactDOM = require('react-dom');
+    return {
+      render: (element) => {
+        ReactDOM.render(element, container);
+      },
+    };
+  }
+}
+
 function DocsRoot({ componentId, docs, compositions, context }: DocsRootProps) {
-  ReactDOM.render(
-    <DocsApp componentId={componentId} docs={docs} compositions={compositions} context={context} />,
-    document.getElementById('root')
-  );
+  if (!root) {
+    root = createCompatRoot(document.getElementById('root')!);
+  }
+  root.render(<DocsApp componentId={componentId} docs={docs} compositions={compositions} context={context} />);
 }

 // For backward compatibility - can be removed end of 2022

diff --git a/scopes/scope/scope/ui/scope.tsx b/scopes/scope/scope/ui/scope.tsx
@@ -24,7 +24,7 @@ import type { ScopeUI, ScopeBadgeSlot, ScopeContextType, CornerSlot, OverviewLin
 export type ScopeProps = {
  routeSlot: RouteSlot;
  menuSlot: RouteSlot;
-  sidebar: JSX.Element;
+  sidebar: React.JSX.Element;
  scopeUi: ScopeUI;
  badgeSlot: ScopeBadgeSlot;
  overviewLineSlot: OverviewLineSlot;

diff --git a/scopes/semantics/schema/mock/button-v2/button.tsx b/scopes/semantics/schema/mock/button-v2/button.tsx
@@ -28,7 +28,7 @@ export type ButtonProps = {
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;

 export function Button(props: ButtonProps) {
-  const ref = useRef();
+  const ref = useRef(null);

  const allProps = {
    ...props,