3

I am trying to use async / await for developing a SPFx WebPart. The sample react-async-await-sp-pnp-js in sp-dev-fx-webparts compiles and runs fine on my computer. When I try to use async / await, Visual Code highlights the await keyword stating Cannot find name 'await', the async keyword prefixing the functon appears good. When running gulp test I get the following errors:

Warning - tslint - src\...ts(74,35): error semicolon: Missing semicolon
Error - typescript - src\...ts(73,35): error TS1005: ',' expected.
Error - typescript - src\...ts(73,29): error TS2304: Cannot find name 'await'.

My webpart shows the following versions:

Build tools version: 2.5.3
Node version: v6.11.0

The react-async-await-sp-pnp-js shows the following versions:

Build tools version: 2.7.0
Node version: v6.11.0

Both tsconfig.json appear identical to me.

In package.json some versions slightly differ, and my webpart has no reference to sp-client-base, wich seems to only export Compare.

My package.json:

{
  "name": "ilog",
  "version": "0.0.27",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "dependencies": {
    "@microsoft/sp-core-library": "~1.1.0",
    "@microsoft/sp-webpart-base": "~1.1.1",
    "@types/webpack-env": ">=1.12.1 <1.14.0",
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "immutability-helper": "^2.2.0",
    "@types/immutability-helper": "^2.0.15",
    "@types/react": "0.14.46",
    "@types/react-dom": "0.14.18",
    "@types/react-addons-shallow-compare": "0.14.17",
    "@types/react-addons-update": "0.14.14",
    "@types/react-addons-test-utils": "0.14.15",
    "moment": "^2.13.0"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.1.0",
    "@microsoft/sp-module-interfaces": "~1.1.0",
    "@microsoft/sp-webpart-workbench": "~1.1.0",
    "@types/chai": ">=3.4.34 <3.6.0",
    "@types/microsoft-ajax": "0.0.32",
    "@types/mocha": ">=2.2.33 <2.6.0",
    "@types/sharepoint": "^2013.1.6",
    "gulp": "~3.9.1"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  }
}

The react-async-await-sp-pnp-js package.json:

{
  "name": "react-async-await-sp-pnp-js",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "dependencies": {
    "@microsoft/sp-client-base": "~1.0.0",
    "@microsoft/sp-core-library": "~1.0.0",
    "@microsoft/sp-webpart-base": "~1.0.0",
"@types/react": "0.14.46",
"@types/react-addons-shallow-compare": "0.14.17",
    "@types/react-addons-test-utils": "0.14.15",
    "@types/react-addons-update": "0.14.14",
    "@types/react-dom": "0.14.18",
    "@types/webpack-env": ">=1.12.1 <1.14.0",
    "react": "15.5.4",
    "react-dom": "15.5.4",
    "sp-pnp-js": "^2.0.4"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.0.1",
    "@microsoft/sp-module-interfaces": "~1.0.0",
    "@microsoft/sp-webpart-workbench": "~1.0.0",
    "gulp": "~3.9.1",
    "@types/chai": ">=3.4.34 <3.6.0",
    "@types/mocha": ">=2.2.33 <2.6.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  }
}

Any help is much appreciated :-)

Update: Here the code I am trying to get running:

private async loadScripts(): Promise<void> {

    return new Promise<void>((resolve) => {
        if(this._context) {
            resolve();
        }

        const response = await this.loadScript(layoutsUrl + 'init.js', 'Sod');
        resolve();
    });

private loadScript(url: string, globalObjectName: string): Promise<void> {
  • 1
    Can you share your code which uses the async/await methods ? – Gautam Sheth Jul 21 '17 at 5:43
  • I added the code. The async keywords gets accepted, then come the error messages for the async keyword. – Dennis Kuhn Jul 21 '17 at 6:09
  • Can you modify the loadScript function as as private async loadScript(url: string, globalObjectName: string): Promise<void> { and check ? – Gautam Sheth Jul 21 '17 at 6:11
1

The await keyword can only be used inside an async function. You are using await in the callback for your returned Promise which is not marked as async. Here is how you can make the callback async:

private async loadScripts(): Promise<void> { 
    return new Promise<void>(async (resolve) => {
        if(this._context) {
            resolve();
        }

        const response = await this.loadScript(layoutsUrl + 'init.js', 'Sod');
        resolve();
    });
  }
  • Oh, thank you very much :-) Thanks for all your great efforts including your blog :-) – Dennis Kuhn Jul 21 '17 at 17:29
  • 1
    No problem! Glad I could help – Vardhaman Deshpande Jul 22 '17 at 13:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.