Fluentui: Can't set children on Modal using TypeScript 3.3.1

Created on 1 Feb 2019 · 12Comments · Source: microsoft/fluentui

Environment Information

__Package version(s)__: 6.132.0

Please provide a reproduction of the bug in a codepen:

Try to compile the following code using Typescript 3.3.1

import { Modal} from 'office-ui-fabric-react/lib/Modal';
import * as React from 'react';

export const MyModal: React.SFC = () => {
    return (
        <Modal>
            <div>hello world</div>
        </Modal>
    );
}

Actual behavior:

Compile error

index.tsx:6:10 - error TS2559: Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & IModalProps'.

6         <Modal>
           ~~~~~


Found 1 error.

Expected behavior:

No compile error

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: High

Products/sites affected: (if applicable)

Typescript Type

Source

dlannoye

👍1

Most helpful comment

For a workaround I was able to do the following type augmentation:

declare module 'office-ui-fabric-react/lib/Modal' {
 const Modal: React.StatelessComponent<IModalProps>;
}

I noticed that the Dialog component didn't have this issue and saw that it was using React.StatelessComponent as the type rather then relying on the implicit type generated by the styled HOC.

Putting this explicit type would fix the issue, but this makes me wonder if the return type of the styled HOC should be looked at for a possible root cause.

dlannoye on 5 Feb 2019

👍4 😄1

All 12 comments

Looks like TS 3.3's TSX checks that it can pass children as part of the component props (the output js passes everything in createElement's props argument).

This probably means that functional components need to include children in their props interface (IModalProps in this case).

The FunctionComponent in newer @types/react versions explicitly adds children to the accepted props:

    interface FunctionComponent<P = {}> {
        (props: P & { children?: ReactNode }, context?: any): ReactElement<any> | null;
        propTypes?: ValidationMap<P>;
        contextTypes?: ValidationMap<any>;
        defaultProps?: Partial<P>;
        displayName?: string;
    }

asmundg on 5 Feb 2019

For a workaround I was able to do the following type augmentation:

declare module 'office-ui-fabric-react/lib/Modal' {
 const Modal: React.StatelessComponent<IModalProps>;
}

I noticed that the Dialog component didn't have this issue and saw that it was using React.StatelessComponent as the type rather then relying on the implicit type generated by the styled HOC.

Putting this explicit type would fix the issue, but this makes me wonder if the return type of the styled HOC should be looked at for a possible root cause.

dlannoye on 5 Feb 2019

👍4 😄1

I spent many time to understand where I should set this declare module.

declare module 'office-ui-fabric-react/lib/Modal' {
 const Modal: React.StatelessComponent<IModalProps>;
}

May be some people doesn't understand too.
This code I pasted to react-app-env.d.ts file and now it's working.

bagau on 11 Feb 2019

👍3 ❤1

:tada:This issue was addressed in #8189, which has now been successfully released as @uifabric/[email protected].:tada:

Handy links: