Resolving "SPFx Component All Gulp Commands Failed" Error In O365

Today, I am here with a new issue and a solution to that. In this article, I’ll explain the TSLint error while building an SPFx component (either web part or extension) and then, will show how we resolved it.

Background

We were working on one of the O365 Intranet applications where our team was developing a few SPFx webparts and extensions. We were using Visual Studio Code to build the SPFx components, bundle them, and then package. One of our team members updated all the node modules using npm install and committed to git. So, all of us now had the latest modules. We opened the SPFx folder in the Visual Studio Code to deploy on our tenant. Generally, first, we execute the "gulp clean" command. As soon as we executed this command, we got the following error. The same error we get if we would execute the "gulp build" command.

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 that there are 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 a weird issue since not a single gulp command (gulp clean, gulp build, or gulp serve) is working and we couldn’t deploy our components. It also broke the working of the local workbench.

When we Googled it a bit, we found that in 1.6.0 projects, the tslint.json file was removed from the config folder (C:\WebParts\config\tslint.json) and a 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 the config folder and copy it to the root folder where our project solution file is. After doing this change, our gulp commands started working.

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

If we don’t want to upgrade the packages to the latest version, we can upgrade the SPFx project to the previous versions by executing the following command.

spfx project upgrade [options]

Following are the possible options.

Option	Description
--help	output usage information
-v, --toVersion [toVersion]	The version of SharePoint Framework to which upgrade the project
-o, --output [output]	Output type. json\|text\|md. Default text
--verbose	Runs command with verbose logging
--debug	Runs the command with debug logging

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

Using this command, you can upgrade the 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, and 1.6.0.

Example

spfx project upgrade –toVersion 1.5.1

An important point to remember here is to delete the respective file from the config folder of our SPFx component. If we have the files at both the places, then after building the project, a lot of hidden files for each component are getting added which ultimately creates the problem while committing the changes.

Unfortunately, I couldn’t find more documentation on this.

References:

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
https://spin.atomicobject.com/2017/06/05/tslint-linting-setup/