Fluentui: SPFx 1.8.0 with @microsoft/sp-office-ui-fabric-core 1.8.0 can't compile

[peterremote1980]

Hi All
SPFx 1.8.0 with @microsoft/sp-office-ui-fabric-core 1.8.0 can't compileby command : gulp bundle --ship

[23:49:16] Error - [tsc] node_modules/@uifabric/foundation/lib/ISlots.d.ts(68,124): error TS1005: ')' expected.
[23:49:16] Error - [tsc] node_modules/@uifabric/foundation/lib/ISlots.d.ts(68,177): error TS1005: '(' expected.
[23:49:16] Error - [tsc] node_modules/@uifabric/foundation/lib/ISlots.d.ts(68,185): error TS1005: ':' expected.
[23:49:16] Error - [tsc] node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(15,67): error TS1005: ';' expected.
[23:49:16] Error - [tsc] node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(15,114): error TS1005: '(' expected.
[23:49:16] Error - [tsc] node_modules/@uifabric/merge-styles/lib/IStyleSet.d.ts(15,136): error TS1005: '(' expected.

package.json:

{
    "name": "quantr-express",
    "version": "0.0.1",
    "private": true,
    "engines": {
        "node": ">=0.10.0"
    },
    "scripts": {
        "build": "gulp bundle",
        "clean": "gulp clean",
        "test": "gulp test"
    },
    "dependencies": {
        "react": "16.7.0",
        "react-dom": "16.7.0",
        "@types/react": "16.4.2",
        "@types/react-dom": "16.0.5",
        "@microsoft/sp-core-library": "1.8.0",
        "@microsoft/sp-property-pane": "1.8.0",
        "@microsoft/sp-webpart-base": "1.8.0",
        "@microsoft/sp-lodash-subset": "1.8.0",
        "@microsoft/sp-office-ui-fabric-core": "1.8.0",
        "@types/webpack-env": "1.13.1",
        "@types/es6-promise": "0.0.33",
        "@fortawesome/fontawesome": "^1.1.8",
        "@fortawesome/fontawesome-svg-core": "^1.2.7",
        "@fortawesome/free-brands-svg-icons": "^5.4.2",
        "@fortawesome/free-regular-svg-icons": "^5.4.2",
        "@fortawesome/free-solid-svg-icons": "^5.4.2",
        "@fortawesome/react-fontawesome": "^0.1.3",
        "@microsoft/sp-dialog": "^1.8.0",
        "@quantr/quantr-spfx-library": "^1.0.2",
        "@types/react-addons-shallow-compare": "0.14.17",
        "@types/react-addons-test-utils": "0.14.15",
        "@types/react-addons-update": "0.14.14",
        "bootstrap": "^4.1.3",
        "buffer": "^5.2.1",
        "classnames": "^2.2.6",
        "html2canvas": "^1.0.0-alpha.12",
        "jquery": "^3.3.1",
        "popper.js": "1.14.3"
    },
    "resolutions": {
        "@types/react": "16.4.2"
    },
    "devDependencies": {
        "@microsoft/sp-build-web": "1.8.0",
        "@microsoft/sp-tslint-rules": "1.8.0",
        "@microsoft/sp-module-interfaces": "1.8.0",
        "@microsoft/sp-webpart-workbench": "1.8.0",
        "@microsoft/rush-stack-compiler-2.7": "0.4.0",
        "gulp": "~3.9.1",
        "@types/chai": "3.4.34",
        "@types/mocha": "2.2.38",
        "ajv": "~5.2.2"
    }
}

[dzearing]

Usually syntax errors coming from a d.ts file indicate that you're on an incompatible (older) TypeScript build. Is there a way you could upgrade the TS version to something newer? (2.8.1 or above)

[cliffkoh]

Hello, taking a look at the SPFx 1.8 release notes, notice there is this blurp at https://github.com/SharePoint/sp-dev-docs/wiki/SharePoint-Framework-v1.8-release-notes#support-for-typescript-27-29-and-3x for utilizing a newer version of TypeScript :)

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[peterremote1980]

now i am using:

"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",

and

"@microsoft/rush-stack-compiler-3.3": "0.1.17",

But it produce me a new errors:

[20:10:36] Error - [tsc] src/webparts/album/DocLibPickerDialog.tsx(70,11): error TS2322: Type '{ children: any[]; title: string; subText: string; onDismiss: () => void; showCloseButton: true; }' is not assignable to type 'IntrinsicAttributes & IDialogContentProps'.
[20:10:36] [tsc] Property 'children' does not exist on type 'IntrinsicAttributes & IDialogContentProps'.
[20:10:36] Error - [tsc] src/webparts/album/DocLibPickerDialog.tsx(77,5): error TS2322: Type '{ ref: string; onChanged: (event: any) => void; }' is not assignable to type 'IntrinsicAttributes & ITextFieldProps'.
[20:10:36] [tsc] Property 'ref' does not exist on type 'IntrinsicAttributes & ITextFieldProps'.
[20:10:36] Error - [tsc] src/webparts/album/DocLibPickerDialog.tsx(78,5): error TS2322: Type '{ ref: string; items: lDocLibData[]; columns: IColumn[]; selectionMode: SelectionMode.single; isHeaderVisible: true; selection: Selection; }' is not assignable to type 'IntrinsicAttributes & IDetailsListProps'.
[20:10:36] [tsc] Property 'ref' does not exist on type 'IntrinsicAttributes & IDetailsListProps'.
[20:10:36] Error - [tsc] src/webparts/album/DocLibPickerDialog.tsx(94,24): error TS2304: Cannot find name 'TextField'.
[20:10:36] Error - [tsc] src/webparts/album/DocLibPickerDialog.tsx(94,68): error TS2304: Cannot find name 'TextField'.
[20:10:36] Error - [tsc] src/webparts/album/DocLibPickerDialog.tsx(114,19): error TS2304: Cannot find name 'DetailsList'.
[20:10:36] Error - [tsc] src/webparts/album/DocLibPickerDialog.tsx(114,58): error TS2304: Cannot find name 'DetailsList'.
[20:10:36] Error - 'tsc' sub task errored after 8.35 s
exited with code 2

[Paul-Colucci]

I'm in the same boat. I have tried about a dozen solutions. upgraded tons of packages, changed tons of config, tried everything under the sun and there is NO WAY to get this to work. Does anyone even check this stuff before it goes out the door? This should work out of the gate.

[Paul-Colucci]

OK, I was just able to work it out. The problem is with the rush-stack-compiler-3.3 The only version that works is 0.1.6 so if you install the latest version it will fail. You also need to explicitly install typescript. To get it working i did the following:

1 - Delete node_modules and pacakge-lock.json

2 - run the following command:
npm install @microsoft/rush-stack-compiler-3.[email protected] [email protected] --save-dev --save-exact

3 - update tsconfig.json to replace the extends variable with the following:
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",

4 - run the following command:
npm -i

[dzearing]

Thanks @Paul-Colucci for the followup!

[KevinTCoughlin]

The problem is with the rush-stack-compiler-3.3 The only version that works is 0.1.6 so if you install the latest version it will fail. You also need to explicitly install typescript.

+ @iclanton as FYI

[peterremote1980]

Thanks @Paul-Colucci , but i still fail, so sad.