Errors after upgrading SharePoint Framework to a newer version

After upgrading SharePoint Framework (SPFx) to the latest version, there still might be a chance for getting into trouble even if you have done everything by the books. An by the books I of course refer to using the excellent project upgrade tool from the Microsoft 365 CLI (https://pnp.github.io/cli-microsoft365/cmd/spfx/project/project-upgrade/).

Example of error message after running a "gulp build":

Error - [tslint] The 'member-access' rule threw an error in ...

Or maybe...

Error - [tslint] <--- Last few GCs --->
[13034:0x5ded9a0]     3257 ms: Scavenge 870.4 (904.1) -> 870.4 (904.1) MB, 41.4 / 0.0 ms  (average mu = 1.000, current mu = 1.000) allocation failure 
[13034:0x5ded9a0]     4061 ms: Scavenge 1265.7 (1299.4) -> 1265.7 (1299.4) MB, 63.1 / 0.0 ms  (average mu = 1.000, current mu = 1.000) allocation failure 
[13034:0x5ded9a0]     5270 ms: Scavenge 1858.8 (1892.5) -> 1858.8 (1892.5) MB, 95.0 / 0.0 ms  (average mu = 1.000, current mu = 1.000) allocation failure 
<--- JS stacktrace --->
FATAL ERROR: invalid array length Allocation failed - JavaScript heap out of memory

Tips to solve this

  1. You could have forgotten one of the steps in the upgrade report, so it is time to double check.
  2. Create a blank project from scratch to compare essential files like the tslint.json, tsconfig.json etc where it is easy to make mistakes between the versions
  3. Make sure you have a clean copy of you packages by deleting "package-lock.json" and the folder node_modules. Run new install of your packages with npm install and build the project with gulp build again.
  4. Check you package.json for issues with you packages. My most common mistake at the ends is to forget to remove old TypeScript versions when new ones are added by the upgrade script: