Fix: React 19 Build failure bug

[coliff]

React 19 builds are failing so we can't publish to npmjs yet

GitHub Action Failure Output: https://github.com/trimble-oss/modus-web-components/actions/runs/15210403925/job/42782977658

> @trimble-oss/[email protected] build
> npm run tsc


> @trimble-oss/[email protected][9](https://github.com/trimble-oss/modus-web-components/actions/runs/15210403925/job/42782977658#step:7:10) tsc
> tsc -p .

Error: src/components/stencil-generated/react-component-lib/createOverlayComponent.tsx(140,[13](https://github.com/trimble-oss/modus-web-components/actions/runs/15210403925/job/42782977658#step:7:14)): error TS2322: Type 'PropsWithoutRef<Props> & { forwardedRef: ForwardedRef<OverlayType>; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Overlay> & Readonly<Props>'.
  Type 'PropsWithoutRef<Props> & { forwardedRef: ForwardedRef<OverlayType>; }' is not assignable to type 'Readonly<Props>'.
Error: src/components/stencil-generated/react-component-lib/utils/index.tsx(40,27): error TS2345: Argument of type '{ (props: StencilReactExternalProps<PropType, ElementType>, ref: StencilReactForwardedRef<ElementType>): React.JSX.Element; displayName: string; }' is not assignable to parameter of type 'ForwardRefRenderFunction<ElementType, PropsWithoutRef<StencilReactExternalProps<PropType, ElementType>>>'.
  Types of parameters 'props' and 'props' are incompatible.
    Type 'PropsWithoutRef<StencilReactExternalProps<PropType, ElementType>>' is not assignable to type 'StencilReactExternalProps<PropType, ElementType>'.
      Type 'StencilReactExternalProps<PropType, ElementType> | ("ref" extends "slot" | "title" | "children" | "defaultChecked" | ... 271 more ... | keyof StyleReactProps ? Omit<...> : StencilReactExternalProps<...>)' is not assignable to type 'StencilReactExternalProps<PropType, ElementType>'.
        Type '"ref" extends "slot" | "title" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | ... 266 more ... | keyof StyleReactProps ? Omit<...> : StencilReactExternalProps<...>' is not assignable to type 'StencilReactExternalProps<PropType, ElementType>'.
          Type 'StencilReactExternalProps<PropType, ElementType> | Omit<StencilReactExternalProps<PropType, ElementType>, keyof PropType & "ref">' is not assignable to type 'StencilReactExternalProps<PropType, ElementType>'.
            Type 'Omit<StencilReactExternalProps<PropType, ElementType>, keyof PropType & "ref">' is not assignable to type 'StencilReactExternalProps<PropType, ElementType>'.
              Type 'Omit<StencilReactExternalProps<PropType, ElementType>, keyof PropType & "ref">' is not assignable to type 'PropType'.
                'PropType' could be instantiated with an arbitrary type which could be unrelated to 'Omit<StencilReactExternalProps<PropType, ElementType>, keyof PropType & "ref">'.

[ElishaSamPeterPrabhu]

Summary of React 19 Build Issues with @stencil/[email protected]

We've worked on resolving build failures in our React 19 project (react-workspace/react-19) after upgrading to @stencil/[email protected].

Key Steps Taken & Findings:

1. Upgraded Dependencies & Config:
   • Updated @stencil/react-output-target to 1.0.4 in the Stencil library (stencil-workspace) and React 19 project.
   • Adjusted stencil-workspace/stencil.config.ts for the new output target options (outDir, stencilPackageName).
   • Updated TypeScript to v5.x and tsconfig.json (module: "esnext", moduleResolution: "bundler") in the React 19 project.
2. Stencil Type Exports Fixed:
   • Modified stencil-workspace/src/interfaces.d.ts (by changing export { Components, JSX } from './components'; to export * from './components';) to ensure all necessary event types (e.g., ModusBreadcrumbCustomEvent) are properly exported by the @trimble-oss/modus-web-components package.
3. Local Dependency Linking:
   • Used npm link to connect the local stencil-workspace to the react-19 project. This resolved numerous "Module has no exported member 'Modus...CustomEvent'" errors by ensuring the React 19 project used the locally built Stencil package with the corrected type exports.
4. Comparative Analysis:
   • The react-18 project, with identical updates and output target version (1.0.4), builds successfully.
   • @stencil/[email protected] is not compatible with React 17 due to peer dependency constraints (react@"^18 || ^19").

Current Status & Root Cause for React 19:

The react-19 build now fails with only two specific TypeScript errors in the auto-generated files within react-workspace/react-19/src/components/stencil-generated/react-component-lib/:

1. createOverlayComponent.tsx (TS2322): Type mismatch related to PropsWithoutRef and ForwardedRef when rendering the overlay component.
2. utils/index.tsx (TS2345): Type mismatch in the React.forwardRef call, involving ForwardRefRenderFunction and StencilReactExternalProps.

These errors occur in code auto-generated by @stencil/[email protected]. Since this version works for React 18, the persistent errors in React 19 strongly indicate an incompatibility between the output target's generated code and specific type changes in React 19 (likely around ref handling and related prop types).

Why a Direct Fix is Not Currently Feasible:

• The errors originate in files automatically generated by @stencil/react-output-target. Manual edits to these files are temporary and would be overwritten, making them unsustainable.
• The issue seems to be a fundamental type incompatibility between the output target's generated React 19 wrappers and React 19's type system. This requires a change in the generation logic within the @stencil/react-output-target tool itself for a proper and permanent solution.