Skip to content

React 19 JSX types #132

@mscharley

Description

@mscharley

In #128 the peer dependency for mjml-react was bumped to allow React 19, however the dev dependencies weren't also bumped to test the library against react 19. When we're trying to update to React 19, we get the following errors from mjml-react:

../../node_modules/@faire/mjml-react/mjml/Mjml.d.ts:7:67 - error TS2503: Cannot find namespace 'JSX'.

7 export declare function Mjml({ children, ...props }: IMjmlProps): JSX.Element;
                                                                    ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlAccordion.d.ts:26:85 - error TS2503: Cannot find namespace 'JSX'.

26 export declare function MjmlAccordion({ children, ...props }: IMjmlAccordionProps): JSX.Element;
                                                                                       ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlAccordionElement.d.ts:19:99 - error TS2503: Cannot find namespace 'JSX'.

19 export declare function MjmlAccordionElement({ children, ...props }: IMjmlAccordionElementProps): JSX.Element;
                                                                                                     ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlAccordionText.d.ts:24:93 - error TS2503: Cannot find namespace 'JSX'.

24 export declare function MjmlAccordionText({ children, ...props }: IMjmlAccordionTextProps): JSX.Element;
                                                                                               ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlAccordionTitle.d.ts:21:95 - error TS2503: Cannot find namespace 'JSX'.

21 export declare function MjmlAccordionTitle({ children, ...props }: IMjmlAccordionTitleProps): JSX.Element;
                                                                                                 ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlAll.d.ts:8:56 - error TS2503: Cannot find namespace 'JSX'.

8 export declare function MjmlAll(props: IMjmlAllProps): JSX.Element;
                                                         ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlAttributes.d.ts:8:87 - error TS2503: Cannot find namespace 'JSX'.

8 export declare function MjmlAttributes({ children, ...props }: IMjmlAttributesProps): JSX.Element;
                                                                                        ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlBody.d.ts:11:75 - error TS2503: Cannot find namespace 'JSX'.

11 export declare function MjmlBody({ children, ...props }: IMjmlBodyProps): JSX.Element;
                                                                             ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlBreakpoint.d.ts:8:70 - error TS2503: Cannot find namespace 'JSX'.

8 export declare function MjmlBreakpoint(props: IMjmlBreakpointProps): JSX.Element;
                                                                       ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlButton.d.ts:49:79 - error TS2503: Cannot find namespace 'JSX'.

49 export declare function MjmlButton({ children, ...props }: IMjmlButtonProps): JSX.Element;
                                                                                 ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlCarousel.d.ts:27:83 - error TS2503: Cannot find namespace 'JSX'.

27 export declare function MjmlCarousel({ children, ...props }: IMjmlCarouselProps): JSX.Element;
                                                                                     ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlCarouselImage.d.ts:22:93 - error TS2503: Cannot find namespace 'JSX'.

22 export declare function MjmlCarouselImage({ children, ...props }: IMjmlCarouselImageProps): JSX.Element;
                                                                                               ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlClass.d.ts:6:60 - error TS2503: Cannot find namespace 'JSX'.

6 export declare function MjmlClass(props: IMjmlClassProps): JSX.Element;
                                                             ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlColumn.d.ts:31:79 - error TS2503: Cannot find namespace 'JSX'.

31 export declare function MjmlColumn({ children, ...props }: IMjmlColumnProps): JSX.Element;
                                                                                 ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlDivider.d.ts:21:64 - error TS2503: Cannot find namespace 'JSX'.

21 export declare function MjmlDivider(props: IMjmlDividerProps): JSX.Element;
                                                                  ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlFont.d.ts:10:75 - error TS2503: Cannot find namespace 'JSX'.

10 export declare function MjmlFont({ children, ...props }: IMjmlFontProps): JSX.Element;
                                                                             ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlGroup.d.ts:13:77 - error TS2503: Cannot find namespace 'JSX'.

13 export declare function MjmlGroup({ children, ...props }: IMjmlGroupProps): JSX.Element;
                                                                               ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlHead.d.ts:8:75 - error TS2503: Cannot find namespace 'JSX'.

8 export declare function MjmlHead({ children, ...props }: IMjmlHeadProps): JSX.Element;
                                                                            ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlHero.d.ts:32:75 - error TS2503: Cannot find namespace 'JSX'.

32 export declare function MjmlHero({ children, ...props }: IMjmlHeroProps): JSX.Element;
                                                                             ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlHtmlAttribute.d.ts:6:93 - error TS2503: Cannot find namespace 'JSX'.

6 export declare function MjmlHtmlAttribute({ children, ...props }: IMjmlHtmlAttributeProps): JSX.Element;
                                                                                              ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlHtmlAttributes.d.ts:8:95 - error TS2503: Cannot find namespace 'JSX'.

8 export declare function MjmlHtmlAttributes({ children, ...props }: IMjmlHtmlAttributesProps): JSX.Element;
                                                                                                ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlImage.d.ts:40:60 - error TS2503: Cannot find namespace 'JSX'.

40 export declare function MjmlImage(props: IMjmlImageProps): JSX.Element;
                                                              ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlInclude.d.ts:5:64 - error TS2503: Cannot find namespace 'JSX'.

5 export declare function MjmlInclude(props: IMjmlIncludeProps): JSX.Element;
                                                                 ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlNavbar.d.ts:31:79 - error TS2503: Cannot find namespace 'JSX'.

31 export declare function MjmlNavbar({ children, ...props }: IMjmlNavbarProps): JSX.Element;
                                                                                 ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlNavbarLink.d.ts:32:87 - error TS2503: Cannot find namespace 'JSX'.

32 export declare function MjmlNavbarLink({ children, ...props }: IMjmlNavbarLinkProps): JSX.Element;
                                                                                         ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlPreview.d.ts:11:81 - error TS2503: Cannot find namespace 'JSX'.

11 export declare function MjmlPreview({ children, ...props }: IMjmlPreviewProps): JSX.Element;
                                                                                   ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlRaw.d.ts:12:73 - error TS2503: Cannot find namespace 'JSX'.

12 export declare function MjmlRaw({ children, ...props }: IMjmlRawProps): JSX.Element;
                                                                           ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlSection.d.ts:32:81 - error TS2503: Cannot find namespace 'JSX'.

32 export declare function MjmlSection({ children, ...props }: IMjmlSectionProps): JSX.Element;
                                                                                   ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlSelector.d.ts:6:83 - error TS2503: Cannot find namespace 'JSX'.

6 export declare function MjmlSelector({ children, ...props }: IMjmlSelectorProps): JSX.Element;
                                                                                    ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlSocial.d.ts:35:79 - error TS2503: Cannot find namespace 'JSX'.

35 export declare function MjmlSocial({ children, ...props }: IMjmlSocialProps): JSX.Element;
                                                                                 ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlSocialElement.d.ts:44:93 - error TS2503: Cannot find namespace 'JSX'.

44 export declare function MjmlSocialElement({ children, ...props }: IMjmlSocialElementProps): JSX.Element;
                                                                                               ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlSpacer.d.ts:20:62 - error TS2503: Cannot find namespace 'JSX'.

20 export declare function MjmlSpacer(props: IMjmlSpacerProps): JSX.Element;
                                                                ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlStyle.d.ts:9:77 - error TS2503: Cannot find namespace 'JSX'.

9 export declare function MjmlStyle({ children, ...props }: IMjmlStyleProps): JSX.Element;
                                                                              ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlTable.d.ts:37:77 - error TS2503: Cannot find namespace 'JSX'.

37 export declare function MjmlTable({ children, ...props }: IMjmlTableProps): JSX.Element;
                                                                               ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlText.d.ts:33:75 - error TS2503: Cannot find namespace 'JSX'.

33 export declare function MjmlText({ children, ...props }: IMjmlTextProps): JSX.Element;
                                                                             ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlTitle.d.ts:11:77 - error TS2503: Cannot find namespace 'JSX'.

11 export declare function MjmlTitle({ children, ...props }: IMjmlTitleProps): JSX.Element;
                                                                               ~~~

../../node_modules/@faire/mjml-react/mjml/MjmlWrapper.d.ts:32:81 - error TS2503: Cannot find namespace 'JSX'.

32 export declare function MjmlWrapper({ children, ...props }: IMjmlWrapperProps): JSX.Element;
                                                                                   ~~~

Based on the upgrade guide from React, these should be React.JSX.Element, which I believe has worked in older versions of React for a while as well.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions