Fluentui: Error when updating Typescript

Created on 4 Jul 2017  ·  18Comments  ·  Source: microsoft/fluentui

Bug Report

  • __Package version(s)__: 4.2.0

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? (Yes, No)
No

Requested priority: Normal

Products/sites affected: (if applicable)

Describe the issue:

My code works wonderful, as long as I do not update the Typescript-Module. Using 2.3.4 it works , but when I update to a version higher 2.4 webpack gives me an error stating:

ERROR in [at-loader] ./node_modules/@uifabric/utilities/lib/Customizer.d.ts:23:55
TS2559: Type 'ICustomizerProps' has no properties in common with type 'IBaseProps'.

ERROR in [at-loader] ./node_modules/office-ui-fabric-react/lib/components/Layer/LayerHost.d.ts:3:54
TS2559: Type 'HTMLAttributes' has no properties in common with type 'IBaseProps'.

Can anyone help me out here?

Build System Needs ASAP Type
Source
picture LeopoldLerch
👍4

Most helpful comment

Are there any news regarding this issue? Currently it is only annoying as I cannot use new features of typescript (eg. String enums), but when Visual Studio Code updates it´s default Typescript version to >=2.4, this will get quite a bigger issue.

picture LeopoldLerch on 10 Jul 2017
👍3

All 18 comments

I have the same issue, indeed with TypeScript 2.4.

NickSevens picture NickSevens on 6 Jul 2017

I get this too. It is related to a change in TypeScript related to weak type detection:
https://blogs.msdn.microsoft.com/typescript/2017/06/12/announcing-typescript-2-4-rc/

The paragraph about weak type detection includes workarounds.

fusion44 picture fusion44 on 8 Jul 2017
👍1

I'm stuck with it too. 

...
"devDependencies": {
  "typescript": "^2.4.1",
  "office-ui-fabric-react": "^4.16.2"
}
...

But for me there only one error: 

node_modules/@uifabric/utilities/lib/Customizer.d.ts(40,55): error TS2559: Type 'ICustomizerProps' has no properties in common with ty
pe 'IBaseProps'
Seteh picture Seteh on 8 Jul 2017

Are there any news regarding this issue? Currently it is only annoying as I cannot use new features of typescript (eg. String enums), but when Visual Studio Code updates it´s default Typescript version to >=2.4, this will get quite a bigger issue.

LeopoldLerch picture LeopoldLerch on 10 Jul 2017
👍3

I might list the requested priority as high as it's blocking issue for anyone using the latest version of TS (@atneik)

LarsLiden picture LarsLiden on 11 Jul 2017

Looking into it.

dzearing picture dzearing on 11 Jul 2017
😄1

This is now published in 4.18.0 and verified!

dzearing picture dzearing on 12 Jul 2017
🎉1 👍1

Awesome! Thanks!

On Tue, Jul 11, 2017 at 6:52 PM, David Zearing notifications@github.com
wrote:

This is now published in 4.18.0 and verified!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/OfficeDev/office-ui-fabric-react/issues/2128#issuecomment-314621647,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGOd5vpkFmnward1vnR5dzVlev5tZJQVks5sNCbygaJpZM4ONEfd
.

LarsLiden picture LarsLiden on 12 Jul 2017

Seems there may be a few more missing entries. I tested with a subset of the components and not the root export, now seeing the additional failures. Looking

dzearing picture dzearing on 12 Jul 2017

This should be fixed now!

dzearing picture dzearing on 13 Jul 2017

Great!

On Jul 12, 2017 9:04 PM, "David Zearing" notifications@github.com wrote:

This should be fixed now!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/OfficeDev/office-ui-fabric-react/issues/2128#issuecomment-314964665,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGOd5vGf8mYmqEXoND3uRZDOotcTTV9oks5sNZdigaJpZM4ONEfd
.

LarsLiden picture LarsLiden on 13 Jul 2017

@dzearing The same problem happened again in Typescript2.6.1

WHKFZYX-Tool picture WHKFZYX-Tool on 28 Nov 2017
👍1

No, can´t confirm that. I was on 2.6.1 and just updated to 2.6.2, no problems at all. Can you give more details?

LeopoldLerch picture LeopoldLerch on 28 Nov 2017

Hi!

I'm not sure if my error is the same, but I'm receiving the error: "node_modules/office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton.d.ts(4,57): error TS2344: Type 'IButtonProps' does not satisfy the constraint 'IBaseProps'."

package.json

{
  "name": "avance-obra-fabric-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tsc -v & tsc -p tsconfig.json"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/react": "^16.0.25",
    "@types/react-dom": "16.0.3",
    "@types/prop-types": "15.5.2",
    "typescript": "2.6.1" // specific version
  },
  "dependencies": {
    "office-ui-fabric-react": "^5.26.1"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "jsx": "react",
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true,
    "moduleResolution": "node"
  }
}

src/index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';

ReactDOM.render(
  <PrimaryButton>
    I am a button.
  </PrimaryButton>,
  document.getElementById("container")
);

output:

Version 2.6.1
node_modules/office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton.d.ts(4,57): error TS2344: Type 'IButtonProps' does not satisfy the constraint 'IBaseProps'.
node_modules/office-ui-fabric-react/lib/components/Button/BaseButton.d.ts(12,55): error TS2344: Type 'IBaseButtonProps' does not satisfy the constraint 'IBaseProps'.
  Types of property 'componentRef' are incompatible.
    Type '((component: IButton) => void) | undefined' is not assignable to type '((ref: ReactNode) => string | number | boolean | void | {} | ReactElement<any> | (string | number...'.
      Type '(component: IButton) => void' is not assignable to type '((ref: ReactNode) => string | number | boolean | void | {} | ReactElement<any> | (string | number...'.
        Type '(component: IButton) => void' is not assignable to type '(ref: ReactNode) => string | number | boolean | void | {} | ReactElement<any> | (string | number ...'.
node_modules/office-ui-fabric-react/lib/components/Button/Button.d.ts(8,51): error TS2344: Type 'IButtonProps' does not satisfy the constraint 'IBaseProps'.......

Is it the same error? It works ok with typescript <= 2.5.3

Thanks in advance...

huchim picture huchim on 29 Nov 2017
👍1

@LeopoldLerch
HI!
This is my error：“ERROR in [at-loader] ./node_modules/office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton.d.ts:4:57
TS2344: Type 'IButtonProps' does not satisfy the constraint 'IBaseProps'.”

_But if I set " "strictFunctionTypes": false " in tsconfig.json,it works ok.I do not think this is a solution to the problem.
I guess may be is a problem in --strict mode_

package.json

"peerDependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  },
  "devDependencies": {
    "@types/debug": "^0.0.30",
    "@types/immutable": "^3.8.7",
    "@types/invariant": "^2.2.29",
    "@types/lodash": "^4.14.81",
    "@types/node": "^8.0.47",
    "@types/object-assign": "^4.0.30",
    "@types/prop-types": "^15.5.2",
    "@types/react": "^16.0.20",
    "@types/react-dom": "^16.0.2",
    "@types/webpack": "^3.0.14",
    "awesome-typescript-loader": "^3.3.0",
    "babel-eslint": "^8.0.1",
    "better-npm-run": "^0.1.0",
    "debug": "^3.1.0",
    "eslint": "^4.10.0",
    "gulp": "^3.9.1",
    "gulp-connect": "^5.0.0",
    "gulp-typescript": "^3.2.3",
    "gulp-uglify": "^3.0.0",
    "gulp-webpack": "^1.5.0",
    "html-webpack-plugin": "^2.30.1",
    "merge2": "^1.2.0",
    "rimraf": "^2.6.2",
    "run-sequence": "^2.2.0",
    "source-map-loader": "^0.2.3",
    "tslint": "^5.8.0",
    "tslint-react": "^3.2.0",
    "typescript": "^2.6.1",
    "uglify-es": "^3.1.7",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "fbjs": "^0.8.16",
    "immutable": "^3.8.2",
    "invariant": "^2.2.2",
    "lodash": "^4.17.4",
    "office-ui-fabric-react": "^5.26.1",
    "prop-types": "^15.6.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  }

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": [
      "dom",
      "scripthost",
      "es2015"
    ],
    "jsx": "react",
    "strict": true,
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "noImplicitReturns": true,
    "typeRoots": [
      "./node_modules/@types",
      "./src/typings"
    ],
    "experimentalDecorators": true
  },
  "include": [
    "./src/**/*",
    "./example/**/*"
  ]
}

src\index.tsx

import * as React from 'react';

import { DefaultButton } from 'office-ui-fabric-react/lib/Button';

export default class Example extends React.PureComponent<any, any> {
    render() {
        return (
            <div className='RichEditor-root'>
                <DefaultButton>This is a Button</DefaultButton>
            </div>
        );
    }
}

output:

ERROR in [at-loader] ./node_modules/office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton.d.ts:4:57
    TS2344: Type 'IButtonProps' does not satisfy the constraint 'IBaseProps'.

ERROR in [at-loader] ./node_modules/office-ui-fabric-react/lib/components/Button/BaseButton.d.ts:12:55
    TS2344: Type 'IBaseButtonProps' does not satisfy the constraint 'IBaseProps'.
  Types of property 'componentRef' are incompatible.
    Type '((component: IButton) => void) | undefined' is not assignable to type '((ref: ReactNode) => string | number | boolean | void | {} | ReactElement<any> | (string | number...'.
      Type '(component: IButton) => void' is not assignable to type '((ref: ReactNode) => string | number | boolean | void | {} | ReactElement<any> | (string | number...'.
        Type '(component: IButton) => void' is not assignable to type '(ref: ReactNode) => string | number | boolean | void | {} | ReactElement<any> | (string | number ...'.

ERROR in [at-loader] ./node_modules/office-ui-fabric-react/lib/components/Button/Button.d.ts:8:51
    TS2344: Type 'IButtonProps' does not satisfy the constraint 'IBaseProps'.
  Types of property 'componentRef' are incompatible.
    Type '((component: IButton) => void) | undefined' is not assignable to type '((ref: ReactNode) => string | number | boolean | void | {} | ReactElement<any> | (string | number...'.
      Type '(component: IButton) => void' is not assignable to type '((ref: ReactNode) => string | number | boolean | void | {} | ReactElement<any> | (string | number...'.
        Type '(component: IButton) => void' is not assignable to type '(ref: ReactNode) => string | number | boolean | void | {} | ReactElement<any> | (string | number ...'.
          Types of parameters 'component' and 'ref' are incompatible.
            Type 'ReactNode' is not assignable to type 'IButton'.
              Type 'undefined' is not assignable to type 'IButton'.

ERROR in [at-loader] ./node_modules/office-ui-fabric-react/lib/components/Button/CommandBarButton/CommandBarButton.d.ts:4:61
    TS2344: Type 'IButtonProps' does not satisfy the constraint 'IBaseProps'.

ERROR in [at-loader] ./node_modules/office-ui-fabric-react/lib/components/Button/CompoundButton/CompoundButton.d.ts:4:59
    TS2344: Type 'IButtonProps' does not satisfy the constraint 'IBaseProps'.

ERROR in [at-loader] ./node_modules/office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton.d.ts:4:58
    TS2344: Type 'IButtonProps' does not satisfy the constraint 'IBaseProps'.

ERROR in [at-loader] ./node_modules/office-ui-fabric-react/lib/components/Button/IconButton/IconButton.d.ts:4:55
    TS2344: Type 'IButtonProps' does not satisfy the constraint 'IBaseProps'.

ERROR in [at-loader] ./node_modules/office-ui-fabric-react/lib/components/Button/MessageBarButton/MessageBarButton.d.ts:4:61
    TS2344: Type 'IButtonProps' does not satisfy the constraint 'IBaseProps'.

ERROR in [at-loader] ./node_modules/office-ui-fabric-react/lib/components/Button/PrimaryButton/PrimaryButton.d.ts:4:58
    TS2344: Type 'IButtonProps' does not satisfy the constraint 'IBaseProps'.

ERROR in [at-loader] ./node_modules/office-ui-fabric-react/lib/components/Callout/Callout.d.ts:5:52
    TS2344: Type 'ICalloutProps' does not satisfy the constraint 'IBaseProps'.

ERROR in [at-loader] ./node_modules/office-ui-fabric-react/lib/components/Callout/CalloutContent.d.ts:13:59
    TS2344: Type 'ICalloutProps' does not satisfy the constraint 'IBaseProps'.
  Types of property 'componentRef' are incompatible.
    Type '((component: ICallout) => void) | undefined' is not assignable to type '((ref: ReactNode) => string | number | boolean | void | {} | ReactElement<any> | (string | number...'.
      Type '(component: ICallout) => void' is not assignable to type '((ref: ReactNode) => string | number | boolean | void | {} | ReactElement<any> | (string | number...'.
        Type '(component: ICallout) => void' is not assignable to type '(ref: ReactNode) => string | number | boolean | void | {} | ReactElement<any> | (string | number ...'.
          Types of parameters 'component' and 'ref' are incompatible.
            Type 'ReactNode' is not assignable to type 'ICallout'.
              Type 'undefined' is not assignable to type 'ICallout'.

ERROR in [at-loader] ./node_modules/office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.d.ts:22:59
    TS2344: Type 'IContextualMenuProps' does not satisfy the constraint 'IBaseProps'.
  Types of property 'componentRef' are incompatible.
    Type '((component: IContextualMenu) => void) | undefined' is not assignable to type '((ref: ReactNode) => string | number | boolean | void | {} | ReactElement<any> | (string | number...'.
      Type '(component: IContextualMenu) => void' is not assignable to type '((ref: ReactNode) => string | number | boolean | void | {} | ReactElement<any> | (string | number...'.
        Type '(component: IContextualMenu) => void' is not assignable to type '(ref: ReactNode) => string | number | boolean | void | {} | ReactElement<any> | (string | number ...'.
          Types of parameters 'component' and 'ref' are incompatible.
            Type 'ReactNode' is not assignable to type 'IContextualMenu'.
              Type 'undefined' is not assignable to type 'IContextualMenu'.

ERROR in [at-loader] ./node_modules/office-ui-fabric-react/lib/components/FocusZone/FocusZone.d.ts:4:54
    TS2344: Type 'IFocusZoneProps' does not satisfy the constraint 'IBaseProps'.
  Types of property 'componentRef' are incompatible.
    Type '((component: IFocusZone) => void) | undefined' is not assignable to type '((ref: ReactNode) => string | number | boolean | void | {} | ReactElement<any> | (string |
number...'.
      Type '(component: IFocusZone) => void' is not assignable to type '((ref: ReactNode) => string | number | boolean | void | {} | ReactElement<any> | (string | number...'.
        Type '(component: IFocusZone) => void' is not assignable to type '(ref: ReactNode) => string | number | boolean | void | {} | ReactElement<any> | (string | number ...'.
          Types of parameters 'component' and 'ref' are incompatible.
            Type 'ReactNode' is not assignable to type 'IFocusZone'.
              Type 'undefined' is not assignable to type 'IFocusZone'.

It works ok with typescript 2.4.1

Thanks in advance...

zhougz520 picture zhougz520 on 29 Nov 2017

I will use --strictFunctionTypes as @zhougz520 suggest it (workaround, but I will follow this thread if a fix comes).

Thanks @zhougz520

huchim picture huchim on 29 Nov 2017

@zhougz520
Thats because the strictfunctiontypes-flag is new since 2.6. So 2.5 can´t and won´t change transpiling to that not known parameter.

according to
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-6.html

strictfunctiontypes is on by default if you use the strict-flag. And obviously there is an issue in fabric there.

LeopoldLerch picture LeopoldLerch on 29 Nov 2017

@LeopoldLerch
Yes,you are right!
It looks like the same issue with #3285 ,I do not see it yesterday.

zhougz520 picture zhougz520 on 29 Nov 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

ravick4u picture ravick4u  ·  32Comments
JoshuaKGoldberg picture JoshuaKGoldberg  ·  33Comments
Nimelrian picture Nimelrian  ·  38Comments
chrismohr picture chrismohr  ·  45Comments
quanglefed picture quanglefed  ·  33Comments