Hi All,

Today new issue and solution 🙂 in this article I’ll explain the tslint error while building SPFX component (Either web part or extension) and then how we resolved it.

Background: We are working on one of the O365 Intranet application. We are developing few SPFX webparts and extensions. We are using Visual Studio Code to build the SPFX components, bundle them and then package. One of our team member has updated all node modules using npm install and committed to git. So, all of us now having latest modules. We opened the SPFX folder in Visual Studio Code to deploy on our tenant. Generally, first we execute the command gulp clean, as soon as we executed this command we are getting the following error, same error if we would execute command gulp build.

Build target: DEBUG C:\WebParts\node_modules\@microsoft\node-core-library\lib\JsonSchema.js:178
throw new Error(prefix + os.EOL + ^

Error: JSON validation failed:

C:\WebParts\config\tslint.json

Error: #/ (Defines configuration options for the…)
Additional properties not allowed: lintConfig,useDefaultConfigAsBase,removeExistingRules,displayAsWarning at

validateObjectWithCallback (C:\ WebParts\node_modules\@microsoft\node-core-library\lib\JsonSchema.js:178:19) at

JsonSchema.validateObjectWithCallback (C:\WebParts\node_modules\@microsoft\node-core-library\lib\JsonSchema.js:193:13) at

JsonSchema.validateObject (C:\ WebParts\node_modules\@microsoft\node-core-library\lib\JsonSchema.js:175:14)
at TslintCmdTask._readConfigFile (C:\WebParts\node_modules\@microsoft\gulp-core-build\lib\tasks\GulpTask.js:308:28)
at TslintCmdTask.onRegister (C:\WebParts\node_modules\@microsoft\gulp-core-build\lib\tasks\GulpTask.js:87:32)
at Object.initialize (C:\WebParts\node_modules\@microsoft\gulp-core-build\lib\index.js:299:24)
at SPWebBuildRig.initialize (C:\WebParts\node_modules\@microsoft\sp-build-common\lib\BuildRig.js:61:19)
at SPWebBuildRig.initialize (C:\WebParts\node_modules\@microsoft\sp-build-common\lib\SPBuildRig.js:22:15)
at SPWebBuildRig.initialize (C:\WebParts\node_modules\@microsoft\sp-build-web\lib\SPWebBuildRig.js:15:15)
at Object.exports.initialize (C:\WebParts\node_modules\@microsoft\sp-build-web\lib\index.js:23:17)
at Object.<anonymous> (C:\WebParts\gulpfile.js:7:7)
at Module._compile (internal/modules/cjs/loader.js:654:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
at Module.load (internal/modules/cjs/loader.js:566:32)
at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
at Function.Module._load (internal/modules/cjs/loader.js:498:3

From the error it seems to there is issues with all the Microsoft modules.

Solution: We were wondering why it started breaking after updating the modules / packages. We verified the version of all our Microsoft packages package.json file which is now 1.6.0, previously it was 1.5.1, as shown in below figure as well:

Figure 1: Office 365 – SharePoint Online – SPFX component – Version change for microsoft modules after update – which broke all the gulp commands

This seems to be wired issue since not a single gulp command, gulp clean, gulp build, gulp serve is working, and we couldn’t deploy our components. It also broke the working of local workbench.

Bit googled and found that in 1.6.0 projects, tslint.json file was removed from config folder (C:\WebParts\config\tslint.json) and new tslint.json file is created at the root of the solution. So, to resolve this problem we need to delete the tslint.json file from config folder and copy it to the root folder where our project solution file is. After doing this change our gulp commands are started working.

But still gulp serve command is still not working. We are still looking the solution for this issue.

If we don’t want to upgrade the packages to latest version, we can upgrade SPFX project to previous versions by executing following command:
spfx project upgrade [options]

Following are the possible options:

Table 1: Office 365 – SharePoint Online -SPFX project upgrade command options

Using this command, you can upgrade SharePoint Framework projects built using versions: 1.0.0, 1.0.1, 1.0.2, 1.1.0, 1.1.1, 1.1.3, 1.2.0, 1.3.0, 1.3.1, 1.3.2, 1.3.4, 1.4.0, 1.4.1, 1.5.0, 1.5.1, 1.6.0.

Example: spfx project upgrade –toVersion 1.5.1

Important point to remember is delete the respective file from config folder of our SPFX component, if we have files at both the places then on build lots of hidden file for each component are get added which ultimately creates the problem while committing the changes.
Unfortunately, I couldn’t find more documentation on this.

References:
Updating SPFX breaks gulp
spfx project upgrade
What is TSLINT?
https://palantir.github.io/tslint/usage/cli/ 
https://www.npmjs.com/package/tslint
https://narayanatechnicalworld.blogspot.com/2016/05/what-is-tslint.html

Thanks for reading 🙂

Keep reading, share your thoughts, experiences. Feel free to contact us to discuss more. If you have any suggestion / feedback / doubt, you are most welcome.

Stay tuned on Knowledge-Junction, will come up with more such articles.