Font-awesome: Type definitions produce error TS2590 in Typescript 3.4 RC

[olmobrutall]

I just upgraded to Typescript 3.4 RC

after that looks like the type definitions of Font awesome, specifically IconProp, overflow some new limit in the compiler.

import { IconProp } from "@fortawesome/fontawesome-svg-core";

export class ContextualOperationSettings{
  icon?: IconProp;
}

var coc : ContextualOperationSettings | undefined;
const icon = coc.settings && coc.settings.icon;
//error TS2590: Build:Expression produces a union type that is too complex to represent.

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community and thanks for reporting this.

Let's assign @robmadole and @mlwilkerson

[robmadole]

@olmobrutall I can't reproduce this with any recent 3.4 version. Here is my test file:

import { IconProp } from "@fortawesome/fontawesome-svg-core";

export const icon : IconProp = 'coffee'

I've tried [email protected] which was my guess at what version you installed. Can you provide a test case in the form of an NPM project (with a package.json file)?

[olmobrutall]

Have you tried my example?:

import { IconProp } from "@fortawesome/fontawesome-svg-core";

export class ContextualOperationSettings{
  icon?: IconProp;
}

var coc : ContextualOperationSettings | undefined;
const icon = coc.settings && coc.settings.icon;
//error TS2590: Build:Expression produces a union type that is too complex to represent.

In this example TS has to combine undefined with IconProp and then the error comes.

About TS version in package.json, I'm not really sure how to find the version that is installed in visual studio with an .msi file. I'm also using package.json, but this is not the one making the error now (I do transpile only).

[robmadole]

I tried your example @olmobrutall and had no issues. If you can provide a reproduction we'll continue to take a look.

[jdalegonzalez]

We're seeing exactly the same problem when doing exactly the same thing. The definition looks like:

        return {
          id: assessment._id,
          milestoneId: mId,
          name,
          owner: assessment.owner,
          scopetags: assessment.scopetags,
          targetProfile: !!assessment.targetProfile,
          milestone: !!milestone,
          icon: milestone
            ? (['fal', 'history'] as IconProp)
            : assessment.targetProfile
            ? (['fal', 'crosshairs'] as IconProp)
            : undefined
        };

@robmadole Have you tried a type that uses the " | undefined"?

[robmadole]

@jdalegonzalez can you or @olmobrutall provide an executable reproduction of this? I'll hit the Typescript project and work from there.

[jdalegonzalez]

Let me know what counts as executable. Do you need a full CRA example? Will something that shows up in storybook but fails on compile be enough? As a work-around, we've discovered that explicit typing makes the compile error go away.

        const milestoneIcon: IconProp = ['fal', 'history'];
        const targetIcon: IconProp = ['fal', 'crosshairs'];

        return {
          id: assessment._id,
          milestoneId: mId,
          name,
          owner: assessment.owner,
          scopetags: assessment.scopetags,
          targetProfile: !!assessment.targetProfile,
          milestone: !!milestone,
          icon: milestone
            ? milestoneIcon
            : assessment.targetProfile
            ? targetIcon
            : undefined
        };

[robmadole]

@jdalegonzalez ideally something that fails on compile. I think this would be the best way to work with the Typescript folks.

[ezfe]

Hi all, I'm having this issue too.

In my properties Interface:

icon?: IconProp,

And the code that causes the issue:

<FontAwesomeIcon icon={this.props.icon || "edit"} />
                     //^^^^^^^^^^^^^^^^^^^^^^^^^
                     //Expression produces a union type that is too complex to represent.

[StJohn3D]

Had the same issue, then I realized that IconProp was too generic and what I really wanted was IconDefinition instead.

import { IconDefinition } from '@fortawesome/fontawesome-svg-core'

If your interface only needs to accept Icons from @fortawesome/free-solid-svg-icons or @fortawesome/free-regular-svg-icons etc..., then IconDefinition is all you should need.

[Anima-t3d]

I had the same issue when providing default value iconLeft = "", iconRight = "":

export interface IButtonProps {
  children: ReactNode;
  isDisabled?: boolean;
  iconLeft?: IconProp;
  iconRight?: IconProp;
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
}

const Button: React.FC<IButtonProps> = ({ children, iconLeft = "", iconRight = "", onClick, isDisabled = false }) => {...};

I removed the default value and it works:

export interface IButtonProps {
  children: ReactNode;
  isDisabled?: boolean;
  iconLeft?: IconProp;
  iconRight?: IconProp;
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
}

const Button: React.FC<IButtonProps> = ({ children, iconLeft, iconRight, onClick, isDisabled = false }) => {...};