Luis Valencia Luis Valencia - 1 month ago 588
TypeScript Question

error TS1056: Accessors are only available when targeting ECMAScript 5 and higher

I have a sharepoint framework project with the following folder structure:


  1. It has a library called dataaccess and a webpart factory method



Sharepointdataprovider.ts file

import {
SPHttpClient,
SPHttpClientBatch,
SPHttpClientResponse
} from '@microsoft/sp-http';
import { IWebPartContext } from '@microsoft/sp-webpart-base';

import List from '../models/List';

import IDataProvider from './IDataProvider';

export default class SharePointDataProvider implements IDataProvider {

private _selectedList: List;
private _lists: List[];
private _listsUrl: string;
private _listItemsUrl: string;
private _webPartContext: IWebPartContext;

public set selectedList(value: List) {
this._selectedList = value;
this._listItemsUrl = `${this._listsUrl}(guid'${value.Id}')/items`;
}

public get selectedList(): List {
return this._selectedList;
}

public set webPartContext(value: IWebPartContext) {
this._webPartContext = value;
this._listsUrl = `${this._webPartContext.pageContext.web.absoluteUrl}/_api/web/lists`;
}

public get webPartContext(): IWebPartContext {
return this._webPartContext;
}

public getLists(): Promise<List[]> {
const listTemplateId: string = '171';
const queryString: string = `?$filter=BaseTemplate eq ${listTemplateId}`;
const queryUrl: string = this._listsUrl + queryString;

return this._webPartContext.spHttpClient.get(queryUrl, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
})
.then((json: { value: List[] }) => {
return this._lists = json.value;
});
}
}


In my gulpfile.js I have this:

'use strict';

const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');

//Required libraries to update typings
var through = require('through2'),
util = require('gulp-util'),
spawn = require('child_process').spawn,
clean = require('gulp-clean'),
ts = require('gulp-typescript');

//ootb
build.initialize(gulp);

// required variables to make configuration easier on the gulp tasks below
var libsPath = 'lib/libraries';
var srcPath = 'src/libraries';
var spdataaccessLibraryFolder = 'spdataaccess';

gulp.task('watch-spdataaccess-lib', (cb) => {
var watcher = gulp.watch(`${srcPath}/${spdataaccessLibraryFolder}/**/*.ts`, ['update-spdataaccess-typings']);
watcher.on('change', (event) => {
console.log(`File ${event.path} was ${event.type}, Rebuilding library typings...`);
});
});

gulp.task('update-spdataaccess-typings', [
'update-spdataaccess-typings:clean-old-typings',
'update-spdataaccess-typings:get-latest-typings',
'update-spdataaccess-typings:build-lib-typings'
], () => {
});

gulp.task('update-spdataaccess-typings:clean-old-typings', () => {
return gulp.src(`${libsPath}/${spdataaccessLibraryFolder}/**`, { read: false })
.pipe(clean());
});

gulp.task('update-spdataaccess-typings:get-latest-typings', ['update-spdataaccess-typings:clean-old-typings'], () => {
var tsResult = gulp.src(`${srcPath}/${spdataaccessLibraryFolder}/**/*.ts`)
.pipe(ts({
outDir: `${libsPath}/${spdataaccessLibraryFolder}`,
module: 'umd',
declaration: true
}));
return tsResult.dts.pipe(gulp.dest(`${libsPath}/${spdataaccessLibraryFolder}`));
});

gulp.task('update-spdataaccess-typings:build-lib-typings', ['update-spdataaccess-typings:get-latest-typings'], () => {
return gulp.src(`${libsPath}/${spdataaccessLibraryFolder}/**/*.d.ts`)
.pipe(updateLibTypings('spdataaccessLibrary.d.ts'))
.pipe(gulp.dest('./typings'));
});

var updateLibTypings = function (typingsFilePath, opt) {
var typings = ["declare module 'spdataaccess' {"];
var latestFile;

function processTypings(file, encoding, cb) {
if (file.isNull() || file.isStream()) {
cb();
return;
}

latestFile = file;

var contents = file.contents.toString('utf8');
if (contents.indexOf('export declare class ') === -1) {
cb();
return;
}

contents = contents.replace('export declare class ', 'class ');
typings.push(contents);
cb();
}

function endStream(cb) {
if (!latestFile) {
cb();
return;
}

typings.push('}');

var file = latestFile.clone({ contents: false });
file.path = latestFile.base + typingsFilePath;
file.contents = new Buffer(typings.join('\r\n'));
this.push(file)
cb();
}

return through.obj(processTypings, endStream);
}


However when I try to run:


gulp update-spdataaccess-typings


I get these errors:

src\libraries\spdataaccess\dataproviders\sharepointDataProvider.ts(20,16): error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.
src\libraries\spdataaccess\dataproviders\sharepointDataProvider.ts(25,16): error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.
src\libraries\spdataaccess\dataproviders\sharepointDataProvider.ts(29,16): error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.
src\libraries\spdataaccess\dataproviders\sharepointDataProvider.ts(34,16): error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.



If I check tsconfig.json, it seems to be fine



{
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "commonjs",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"types": [
"es6-promise",
"es6-collections",
"webpack-env"
]
}
}


enter image description here

Answer Source

gulp-typescript - by default - doesn't read tsconfig.json.

Please see: https://github.com/ivogabe/gulp-typescript#user-content-using-tsconfigjson

In the update-spdataaccess-typings:get-latest-typings task, you are missing the target property:

ts({
    target: "es5",
    outDir: `${libsPath}/${spdataaccessLibraryFolder}`,
    module: 'umd',
    declaration: true
})