How to enable Async/Wait in SPFx Typescript, tslint: Missing semicolon, TS1005: ',' expected, TS2304: Cannot find name 'await'

Question

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> {

Answer 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();
    });
  }