How to enable Async/Wait in SPFx Typescript, tslint: Missing semicolon, TS1005: ',' expected, TS2304: Cannot find name 'await'
-
28-12-2020 - |
質問
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> {
解決
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();
});
}