Yeoman SP generator targets @microsoft/rush-stack-compiler-3.3 resulting in error TS1109: Expression expected (TS v3.7 required for Optional Chaining)

tyh77 commented 3 years ago

Describe the bug

Our Web Part uses a particular dependency @paperbits/common v0.1.357 that uses TypeScript Optional Chaining (?. operator), introduced in TypeScript v3.7 (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html)

During tsc, the following error is encountered:

[13:29:18] Starting subtask 'tsc'... [13:29:18] [tsc] typescript version: 3.3.4000 Request: [::1] '/workbench' Request: '/temp/workbench.html' Request: '/temp/manifests.js' Request: '/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js' Request: '/temp/workbench-packages/@microsoft_sp-webpart-workbench/lib/api/workbenchInit.js' Request: '/node_modules/@microsoft/sp-property-pane/dist/sp-property-pane_en-us.js' [13:29:20] Error - [tsc] node_modules/@paperbits/common/editing/gridHelper.ts(12,35): error TS1109: Expression expected. [13:29:20] Error - [tsc] node_modules/@paperbits/common/editing/gridHelper.ts(12,49): error TS1005: ':' expected. [13:29:20] Error - [tsc] node_modules/@paperbits/common/editing/gridHelper.ts(21,35): error TS1109: Expression expected. [13:29:20] Error - [tsc] node_modules/@paperbits/common/editing/gridHelper.ts(21,49): error TS1005: ':' expected. [13:29:20] Error - [tsc] node_modules/@paperbits/common/editing/gridHelper.ts(34,31): error TS1109: Expression expected. [13:29:20] Error - [tsc] node_modules/@paperbits/common/editing/gridHelper.ts(34,45): error TS1005: ':' expected. [13:29:20] Error - [tsc] node_modules/@paperbits/common/permalinks/permalinkResolver.ts(84,57): error TS1109: Expression expected. [13:29:20] Error - [tsc] node_modules/@paperbits/common/permalinks/permalinkResolver.ts(84,98): error TS1005: ':' expected. [13:29:20] Error - [tsc] node_modules/@paperbits/common/permalinks/permalinkResolver.ts(100,57): error TS1109: Expression expected. [13:29:20] Error - [tsc] node_modules/@paperbits/common/permalinks/permalinkResolver.ts(100,102): error TS1005: ':' expected. [13:29:20] Error - 'tsc' sub task errored after 2.14 s exited with code 2

Steps to reproduce

Create new SPFx project with Yeoman: yo @microsoft/sharepoint

? What is your solution name? helloworld ? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest) ? Where do you want to place the files? Create a subfolder with solution name Found npm version 6.14.6 ? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? No ? Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? No ? Which type of client-side component to create? WebPart >Add new Web part to solution helloworld. ? What is your Web part name? HelloWorld ? What is your Web part description? HelloWorld description ? Which framework would you like to use? No JavaScript framework
npm i @paperbits/common
Do an import to @paperbits/common in the HelloWorld web part: import { GridHelper } from '@paperbits/common/editing';
gulp serve

package.json:

{
  "name": "helloworld",
  "version": "0.0.1",
  "private": true,
  "main": "lib/index.js",
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/sp-core-library": "1.11.0",
    "@microsoft/sp-lodash-subset": "1.11.0",
    "@microsoft/sp-office-ui-fabric-core": "1.11.0",
    "@microsoft/sp-property-pane": "1.11.0",
    "@microsoft/sp-webpart-base": "1.11.0",
    "@paperbits/common": "^0.1.357"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "1.11.0",
    "@microsoft/sp-tslint-rules": "1.11.0",
    "@microsoft/sp-module-interfaces": "1.11.0",
    "@microsoft/sp-webpart-workbench": "1.11.0",
    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
    "gulp": "~3.9.1",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2",
    "@types/webpack-env": "1.13.1",
    "@types/es6-promise": "0.0.33"
  }
}

Expected behavior

Successful compilation of Web Part and serving into local SP workbench

Environment details (development & target environment)

Your Developer Environment: Windows 10
Target Environment: SharePoint Online
Framework: No JS framework
@microsoft/generator-sharepoint: v1.11.0

Additional context

Our dependency: @paperbits/common uses a the Optional Chaining operator like so

import * as ko from "knockout";
import { IWidgetBinding, WidgetBinding, WidgetStackItem } from "../editing";

export class GridHelper {
    public static getWidgetStack(element: HTMLElement): WidgetStackItem[] {
        const stack: WidgetStackItem[] = [];

        do {
            const context = ko.dataFor(element);

            if (!context) {
                element = element?.parentElement;
                continue;
            }
. . .

By Default the SPFx solution generator uses @microsoft/rush-stack-compiler-3.3, which targets TypeScript v3.3. However, a newer Rush Stack compiler exists that targets TypeScript v3.7. I'm wondering if I can upgrade the dependency tree to use 3.7 as opposed to 3.3?

Would this break anything? How can I specify a different TypeScript compiler when scaffolding a new project using the SP Yeoman generator?

ghost commented 3 years ago

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

andrewconnell commented 3 years ago

You say you want to use TypeScript 3.7, but this line:

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

... in your package.json is using TypeScript v3.3. The ability to use different versions of TypeScript from what is included in the OOTB project was added in SPFx v1.8.2. Refer to the release notes on how it works as well as this post by Elio.

With that being said, there hasn't been a recommended version of the Rush TS compiler project to use TS v3.7 with SPFx 1.11, the current release. You can try different versions of the 3.7 Rush TS compiler package to see if one works, but AFAIK, there's no recommended/supported version.

tyh77 commented 3 years ago

Thanks @andrewconnell

I targeted the 3.7 Rush TS Compiler to see if it would work.

I'm encountering errors loading the web part I developed, but am not sure what the issue is (doesn't seem like the component is even entering Render() )

[SPLoaderError.loadComponentError]:
***Failed to load component "cf2dde94-4dbc-4dfe-9d48-907d9f0a7280" (NgxTestConsoleWebPart). Original error: ***Failed to load entry point from component "cf2dde94-4dbc-4dfe-9d48-907d9f0a7280" (NgxTestConsoleWebPart). Original error: Error loading https://component-id.invalid/cf2dde94-4dbc-4dfe-9d48-907d9f0a7280_1.0.2
    https://component-id.invalid/cf2dde94-4dbc-4dfe-9d48-907d9f0a7280_1.0.2 did not call System.register or AMD define. If loading a global module configure the global name via the meta exports property for script injection support.

***INNERERROR:
***Failed to load entry point from component "cf2dde94-4dbc-4dfe-9d48-907d9f0a7280" (NgxTestConsoleWebPart). Original error: Error loading https://component-id.invalid/cf2dde94-4dbc-4dfe-9d48-907d9f0a7280_1.0.2
    https://component-id.invalid/cf2dde94-4dbc-4dfe-9d48-907d9f0a7280_1.0.2 did not call System.register or AMD define. If loading a global module configure the global name via the meta exports property for script injection support.
***CALLSTACK:
Error
    at SPLoaderError.SPError [as constructor] (https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:24453:24)
    at new SPLoaderError (https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:42171:28)
    at Function../sp-loader.js.__WEBPACK_AMD_DEFINE_RESULT__.ff4n.ErrorBuilder.buildErrorWithVerboseLog (https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46165:21)
    at Function../sp-loader.js.__WEBPACK_AMD_DEFINE_RESULT__.ff4n.ErrorBuilder.buildLoadComponentError (https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46034:21)
    at https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45372:75

Do you have any recommendations for debugging this? I'm not sure if this is related to the Rush TS Compiler

andrewconnell commented 3 years ago

You don't just target the package, you have to get the specific version that is supported by the SPFx team. As you can see, there are quite a few options: https://www.npmjs.com/package/@microsoft/rush-stack-compiler-3.7

That's why I said above, TS 3.7 is not officially supported by the SPFx team. You can see what is supported here: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/release-1.8.0#support-for-typescript-27-29-and-3x-general-availability

Of course, you could try one of the many different versions of the RSC-3.7 package to see if any work with SPFx v1.11, but you're not just having to consider it working with your code, but also with the SPFx engine & dependencies. That's the problem you're hitting in the error before.

But... IMHO... SPFx v1.11 is supported at TS v3.3, and that's it for now. TypeScript 3.7 released no November 5, 2020 while the most recent version of SPFx (v1.11) released on July 16, 2020. It's no surprise you're having issues with TS 3.7.

ghost commented 3 years ago

Closing this issue as "answered". If you encounter a similar issue(s), please open up a new issue. See our wiki for more details: Issue-List: Our approach to closed issues

andrewconnell commented 3 years ago

@tyh77 Might find this useful... https://www.voitanos.io/blog/use-different-typescript-versions-in-sharepoint-framework-projects/#typescript-v37

SharePoint / sp-dev-docs