React 19 support

[lopenchi]

As mentioned in your changelog, you are already supporting react 19, but we are using react 19 and we are getting some errors

We are getting the errors when defining styled components like this one:

import { css, styled } from '@twilio-paste/core/styling-library';

const MermaidWrapper = styled('pre')(
  css({
    display: 'flex',
    justifyContent: 'center',
    marginBottom: 'space70',
  }),
);

Error is:

error TS2769: No overload matches this call.
  Overload 1 of 6, '(component: ComponentClass<{}, any>, options?: StyledOptions<{}> | undefined): CreateStyledComponent<any, {}, { ref?: Ref<Component<{}, any, any>> | undefined; }>', gave the following error.
    Argument of type 'string' is not assignable to parameter of type 'ComponentClass<{}, any>'.
  Overload 2 of 6, '(component: ComponentType<{}>, options?: StyledOptions<{}> | undefined): CreateStyledComponent<any, {}, {}>', gave the following error.
    Argument of type 'string' is not assignable to parameter of type 'ComponentType<{}>'.
  Overload 3 of 6, '(tag: never, options?: StyledOptions<never> | undefined): CreateStyledComponent<{ theme?: Theme | undefined; as?: ElementType<any, keyof IntrinsicElements> | undefined; }, never, {}>', gave the following error.
    Argument of type '"pre"' is not assignable to parameter of type 'never'.

10 const MermaidWrapper = styled('pre')(

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Refactoring old style libs to @twilio-paste/styling-library (updated: 04/17/2023, similarity score: 88%)
• Which version of typescript we should use? (updated: 06/14/2022, similarity score: 88%)
• Using Paste v18 with React 17 (updated: 01/17/2024, similarity score: 87%)

[dosubot[bot]]

Hi @lopenchi! I'm Dosu and I’m helping the paste team.

Paste does officially support React 19, but the TypeScript error you’re seeing is likely due to a mismatch between the version of @emotion/styled (which Paste uses under the hood) and React 19’s updated JSX typings. The version currently bundled with Paste is @emotion/styled 11.10.5, which may not fully recognize React 19’s JSX.IntrinsicElements, causing the overload to resolve to never and resulting in your error (source).

If you’re using Next.js or React Server Components, you may also run into related issues due to Emotion’s lack of full RSC support. A common workaround is to create a file with the "use client" directive at the top and re-export your Paste components from there (discussion). For example:

// paste-client.ts
"use client";
export * from "@twilio-paste/core";

Then import from this file instead of directly from Paste. For best tree-shaking and bundle size, prefer granular exports (e.g., export { Alert } from "@twilio-paste/core/alert";) rather than wildcards.

To fully resolve the TypeScript error, check if there’s a newer release of @emotion/styled (and related Emotion packages) that explicitly supports React 19’s JSX typings and try upgrading if possible. If not, you may need to wait for an upstream fix or patch the types locally as a temporary workaround.

If you can share your exact versions of @twilio-paste/core, @twilio-paste/styling-library, @emotion/styled, react, and typescript, I can help confirm if there’s a version mismatch or suggest a more targeted solution.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[lopenchi]

@dosu Here are the exact versions:

• @twilio-paste/core 21.50
• @twilio-paste/styling-library 4.0.1
• @emotion/styled 11.10.5
• react 19.2.1
• typescript 5.9.3

[dosubot[bot]]

Your versions are intended to support React 19, but the TypeScript error with styled('pre') happens because @emotion/styled 11.10.5 doesn't fully recognize React 19's updated JSX typings, so the overload for string tags like 'pre' resolves to never. This isn't caused by Paste itself—Paste just re-exports Emotion's styled without any type changes, so the issue is upstream in Emotion's types.

A widely recommended workaround is to create a file with the "use client" directive at the top and re-export your Paste components from there. For best results, use granular exports (like export { Alert } from "@twilio-paste/core/alert") instead of wildcards to keep your bundle size down. This approach is especially important if you're using Next.js or React Server Components, but it can also help sidestep some of these type issues for now. Paste maintainers are working on adding "use client" to individual components and icons to improve compatibility in future releases (discussion).

Keep an eye out for new releases of @emotion/styled that explicitly support React 19's JSX typings—upgrading when available should resolve this error at the source. If you need an immediate fix and are comfortable with TypeScript, you could try patching Emotion's types locally, but that's a more advanced workaround.

Let me know if you want a concrete example of the "use client" workaround or have questions about patching types!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[lopenchi]

@dosu Yes, I would like to see the example

[dosubot[bot]]

Here's a concrete example of the "use client" workaround that resolves the TypeScript error with styled components and React 19:

1. Create a file (for example, paste-client.ts) in your project with the following content:

"use client";

// Wildcard export (quickest, but not optimal for bundle size)
export * from "@twilio-paste/core";

// OR, for better tree shaking and smaller bundles, use granular exports:
export { styled, css } from "@twilio-paste/core/styling-library";
export { Alert } from "@twilio-paste/core/alert";
// ...add any other components you need

2. In your app, import Paste components from this new file instead of directly from @twilio-paste/core or @twilio-paste/core/styling-library:

import { styled, css } from "./paste-client";

const MermaidWrapper = styled('pre')(
  css({
    display: 'flex',
    justifyContent: 'center',
    marginBottom: 'space70',
  }),
);

This approach ensures that Paste and Emotion are always loaded as client components, which avoids the TypeScript error caused by Emotion's incomplete support for React 19 JSX typings in server environments. Prefer granular exports for production apps to keep your bundle size down. This workaround is temporary until Emotion and Paste fully support React 19 and React Server Components out of the box see discussion and examples.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[lopenchi]

Does not work, same error

TS2339: Property 'pre' does not exist on type 'CreateStyled'.