SPFx upgrade from 1.12.1 to 1.16.0: TSLint is not supported for rush-stack-compiler-4.X packages.

Description

The output from the project upgrade (going from spfx 1.12.1 to 1.16.0) produces conflicting output. In the output it states Remove-Item "tslint.json"

However, a subsequent instruction says to edit the tslint.json file, which I recreated with just one "extends" command in it. Now the gulp build command fails.

Unfortunately I inherited this project and am just trying to learn how to update them (i.e., not an SP Dev) and don't know if this has anything to do with the tslint.json file or if they're 2 separate issues.

Is there any clarification? Should I have NOT removed the tslint.json and just edit it to replace the "extends" only? Is this a real bug?

Steps to reproduce

nvm use 14.21.1
npm install --legacy-peer-deps
npm cache clean --force
npm install --legacy-peer-deps
nvm use 16.18.1
code .
m365 spfx project upgrade --shell powershell --output tour
m365 spfx project upgrade --shell powershell --output md > "upgrade-report.md"

Follow the steps, including this summary:

npm un -D @microsoft/sp-tslint-rules @microsoft/sp-webpart-workbench @types/chai @types/mocha @types/es6-promise
npm i -SE @microsoft/sp-core-library@1.16.0 @microsoft/sp-lodash-subset@1.16.0 @microsoft/sp-office-ui-fabric-core@1.16.0 @microsoft/sp-webpart-base@1.16.0 react@17.0.1 react-dom@17.0.1 @microsoft/sp-property-pane@1.16.0 office-ui-fabric-react@7.199.1 @microsoft/sp-adaptive-card-extension-base@1.16.0 tslib@2.3.1
npm i -DE @microsoft/eslint-plugin-spfx@1.16.0 @microsoft/eslint-config-spfx@1.16.0 @microsoft/sp-build-web@1.16.0 @microsoft/sp-module-interfaces@1.16.0 @types/react@17.0.45 @types/react-dom@17.0.17 typescript@4.5.5 ajv@6.12.5 @types/webpack-env@1.15.2 @microsoft/rush-stack-compiler-4.5@0.2.2 @rushstack/eslint-config@2.5.1 eslint@8.7.0 eslint-plugin-react-hooks@4.3.0 gulp@4.0.2
npm dedupe
Remove-Item "tslint.json"
@"
require('@rushstack/eslint-config/patch/modern-module-resolution');
module.exports = {
  extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
  parserOptions: { tsconfigRootDir: __dirname }
};
"@ | Out-File -FilePath ".eslintrc.js"
Remove-Item "config\copy-assets.json"

also follow the rest of the instructions, including this one tslint.json command:

Update tslint.json extends property:
{
  "extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json"
}

so tslint.json is now just this:

{
    "extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json"
  }

npm upgrade gulp clean gulp build -- FAIL

Expected results

This is from running a gulp build on an un-updated version:

[14:54:49] Using gulpfile C:\folderA\some-webpart\gulpfile.js
[14:54:49] Starting 'build'...
[14:54:49] Starting gulp
[14:54:49] Starting subtask 'configure-sp-build-rig'...
[14:54:49] Finished subtask 'configure-sp-build-rig' after 9.56 ms
[14:54:49] Starting subtask 'pre-copy'...
[14:54:49] Finished subtask 'pre-copy' after 319 ms
[14:54:49] Starting subtask 'copy-static-assets'...
[14:54:49] Starting subtask 'sass'...
[14:54:49] Finished subtask 'copy-static-assets' after 67 ms
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
[14:54:49] Finished subtask 'sass' after 232 ms
[14:54:49] Starting subtask 'tslint'...
[14:54:51] [tslint] tslint version: 5.12.1
[14:54:51] Starting subtask 'tsc'...
[14:54:51] [tsc] typescript version: 3.3.4000
[14:54:54] Finished subtask 'tslint' after 5.03 s
[14:54:55] Finished subtask 'tsc' after 3.7 s
[14:54:55] Starting subtask 'post-copy'...
[14:54:55] Finished subtask 'post-copy' after 966 μs
[14:54:55] Finished 'build' after 6.22 s
[14:54:55] ==================[ Finished ]==================
[14:54:56] Project some-part version:0.0.2
[14:54:56] Build tools version:3.17.11
[14:54:56] Node version:v14.21.1
[14:54:56] Total duration:21 s

Actual results

[14:24:54] Using gulpfile C:\folderB\some-webpart\gulpfile.js
[14:24:54] Starting 'build'...
[14:24:54] Starting gulp
[14:24:54] Starting subtask 'pre-copy'...
[14:24:54] Finished subtask 'pre-copy' after 320 ms
[14:24:54] Starting subtask 'copy-static-assets'...
[14:24:54] Starting subtask 'sass'...
[14:24:54] Finished subtask 'sass' after 632 ms
[14:24:54] Starting subtask 'lint'...
[14:24:55] Error - 'lint' sub task errored after 78 ms
 TSLint is not supported for rush-stack-compiler-4.X packages.
[14:24:55] Starting subtask 'tsc'...
[14:24:55] [tsc] typescript version: 4.5.5
[14:24:55] 'build' errored after 1.14 s
[14:24:55]
About to exit with code: 1

Diagnostics

No response

CLI for Microsoft 365 version

v6.0.0-beta.ba3c436

nodejs version

16.18.1

Operating system (environment)

Windows

Shell

PowerShell

cli doctor

{
  "os": {
    "platform": "win32",
    "version": "Windows 10 Enterprise",
    "release": "10.0.19044"
  },
  "cliVersion": "6.0.0-beta.ba3c436",
  "nodeVersion": "v16.18.1",
  "cliAadAppId": "--REDACTED FOR POSTING--",
  "cliAadAppTenant": "common",
  "authMode": "DeviceCode",
  "cliEnvironment": "",
  "cliConfig": {},
  "roles": [],
  "scopes": [
    "AllSites.FullControl",
    "AppCatalog.ReadWrite.All",
    "ChannelMember.ReadWrite.All",
    "ChannelMessage.Send",
    "ChannelSettings.ReadWrite.All",
    "Directory.AccessAsUser.All",
    "Directory.ReadWrite.All",
    "Group.ReadWrite.All",
    "IdentityProvider.ReadWrite.All",
    "Mail.ReadWrite",
    "Mail.Send",
    "Policy.Read.All",
    "Reports.Read.All",
    "Tasks.ReadWrite",
    "Team.Create",
    "TeamMember.ReadWrite.All",
    "TeamsApp.ReadWrite.All",
    "TeamsAppInstallation.ReadWriteForUser",
    "TeamSettings.ReadWrite.All",
    "TeamsTab.ReadWrite.All",
    "TermStore.ReadWrite.All",
    "User.Invite.All",
    "User.ReadWrite.All",
    "profile",
    "openid",
    "email"
  ]
}

Additional Info

Note: I also tried another time following the tour and then just replacing the "extends" line without deleting the rest of the file contents, but that failed also.

Hi @JJFranko

Thank you for reporting this issue, we'll have a look at it.

Update: I upgraded cli to be at version 6.0.0 npm i -g @pnp/cli-microsoft365 and then while still on node 16.18.1 I tried to upgrade to 1.15.2 by running m365 spfx project upgrade --toVersion 1.15.2 --shell powershell --output md > "upgrade-report.md"

I got a series of commands that included a command to Remove-Item "tslint.json" but then again later to edit it.

npm un -D @microsoft/sp-tslint-rules @microsoft/sp-webpart-workbench @types/chai @types/mocha @types/es6-promise
npm i -SE @microsoft/sp-core-library@1.15.2 @microsoft/sp-property-pane@1.15.2 @microsoft/sp-webpart-base@1.15.2 @microsoft/sp-lodash-subset@1.15.2 @microsoft/sp-office-ui-fabric-core@1.15.2 @microsoft/sp-adaptive-card-extension-base@1.15.2 office-ui-fabric-react@7.185.7 tslib@2.3.1 react@16.13.1 react-dom@16.13.1
npm i -DE @microsoft/rush-stack-compiler-3.9@0.4.47
npm dedupe
Remove-Item "tslint.json"
@"
require('@rushstack/eslint-config/patch/modern-module-resolution');
module.exports = {
  extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
  parserOptions: { tsconfigRootDir: __dirname }
};
"@ | Out-File -FilePath ".eslintrc.js"
Remove-Item "config\copy-assets.json"

Update tslint.json extends property:

{
  "extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json"
}

After running gulp clean and gulp build once again the build fails at the same spot

Build target: DEBUG
[14:43:37] Using gulpfile C:\folderA\some-webpart\gulpfile.js
[14:43:37] Starting 'build'...
[14:43:37] Starting gulp
[14:43:37] Starting subtask 'pre-copy'...
[14:43:38] Finished subtask 'pre-copy' after 342 ms
[14:43:38] Starting subtask 'copy-static-assets'...
[14:43:38] Starting subtask 'sass'...
[14:43:38] Finished subtask 'sass' after 615 ms
[14:43:38] Starting subtask 'lint'...
[14:43:38] Error - 'lint' sub task errored after 78 ms
 TSLint is not supported for rush-stack-compiler-4.X packages.
[14:43:38] Starting subtask 'tsc'...
[14:43:38] [tsc] typescript version: 4.5.5
[14:43:38] 'build' errored after 1.14 s
[14:43:38]
About to exit with code: 1
Process terminated before summary could be written, possible error in async code not continuing!
Trying to exit with exit code 1

One peculiar thing to note is that the npm commands specifically say npm i -DE @microsoft/rush-stack-compiler-3.9@0.4.47 but the output references " rush-stack-compiler-4.X packages"

Haven't looked into the issue just yet, but on first sight I can tell you that you should delete the tslint.json file and ignore the changes to this file. If I'm not mistaken, tslint was replaced by eslint in SPFx v1.15.0.

It doesn't make sense indeed that you should update a deleted file 😊

Exactly why I was looking for clarification.

OK, so just a followup. I removed the tslint.json file and tried (and tried) again. There were more pain-points just trying to get this to build (again, I'm not an SPDev here so could be just me), but one thing that I did notice that was causing a build fail was related to these errors:

error TS7031: Binding element 'Accordion' implicitly has an 'any' type.
error TS7006: Parameter 'overlayTitle' implicitly has an 'any' type.
error TS7006: Parameter 'OverLayAnnouncement' implicitly has an 'any' type.
error TS7031: Binding element 'props' implicitly has an 'any' type.
error TS7006: Parameter 'length' implicitly has an 'any' type.

So, after doing some searching, it looked like these were the result of adding in the "noImplicitAny": true, in the tsconfig.json file. Adding this was part of the instructions from the upgrade output, so I'm not sure if this is something that needs to be looked at from the project upgrade output or edited in my project. Regardless, changing that line to be "noImplicitAny": false, allowed this project to build without any more errors.

So, after doing some searching, it looked like these were the result of adding in the "noImplicitAny": true, in the tsconfig.json file. Adding this was part of the instructions from the upgrade output, so I'm not sure if this is something that needs to be looked at from the project upgrade output or edited in my project. Regardless, changing that line to be "noImplicitAny": false, allowed this project to build without any more errors.

Hi @JJFranko

In SPFx v1.15 tslint was replaced by eslint and Microsoft defined a set of best practices to code your SPFx projects. I agree that not all these rules are relevant. I also have to enable/disable some rules while writing code, for example the one that restricts you from using an any. The solution here is indeed to disable the rule or let it log as a warning instead of an error.

What we do with spfx project upgrade is updating files/packages of your project so it matches the files/packages of a project of that specific version. Because .eslintrc.js is part of a default scaffolded v1.16.0 project, we are also adding this file with the same rules that are used there. It is up to the developer to enable/disable/add/remove eslint rules.

pnp / cli-microsoft365