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.