WARNING: Unsupported version of TypeScript

While the warning is harmless in our case, I agree that it may be confusing and distracting.

Let's not downgrade the TypeScript version. Instead, can we please see if we can update to a newer version of typescript-eslint? We could also set warnOnUnsupportedTypeScriptVersion to false in our ESLint config, but let's try to avoid that.

@balintbrews The issue is already listed on the StackOverflow.

This is a known issue since (at the time of writing) typescript 5.1.3 is not supported. We can either downgrade your version of typescript to match the required version, or wait until support for typescript 5.1.3 is released by the eslint team

That question on StackOverflow is quite old, and it also shows that the Next.js team was not super concerned about the warning either. 😊

typescript-eslint has support for the latest stable version of TypeScript, 5.6, since its v8.10.0. If we're changing version numbers to get rid of this warning, I would rather get us upgraded to newer versions than going backwards.

@shyam_bhatt, are you up for giving this a try?

yes @balintbrews, I will try once as per your latest comment.

Note that TypeScript 5.8 shipped 4 days ago: https://devblogs.microsoft.com/typescript/announcing-typescript-5-8/ — but not all of our other packages might like that.

Let's move step-by-step. Moving from our current TypeScript 5.4.5 to 5.6 (as @balintbrews alluded to in #7) seems like a worthwhile intermediary step.

Working on it.

I have upgraded TypeScript to version 5.6.3 as per the discussion.
Verified with: npx tsc --version and npm list typescript
Ran npm install to ensure dependencies are correctly installed

After running npm run lint:eslint, I still see the same warning that was present earlier:
Should we now check if we can update to a newer version of @typescript-eslint to resolve this?

Should we now check if we can update to a newer version of @typescript-eslint to resolve this?

Yes, please! 🙏

Just noting here that at one point we should also migrate to ESLint 9 and its new configuration format, but we can leave that to another issue.

… unless it's easier to do :D

I have updated @typescript-eslint/eslint-plugin and @typescript-eslint/parser to 8.26.0 as per the issue requirement.
Installed versions:
@typescript-eslint/eslint-plugin: 8.26.0
@typescript-eslint/parser: 8.26.0

After updating, I ran npm run lint:eslint and encountered the following error:

I could replicate the issue. The problem is dependencies:

Running `npm ls @typescript-eslint/eslint-plugin` shows these:

@drupal/experience_builder@0.0.0 /Users/tina/Sites/PNX/drupal-contrib/experience_builder/ui
├── @typescript-eslint/eslint-plugin@8.26.0
├─┬ eslint-config-react-app@7.0.1
│ ├── @typescript-eslint/eslint-plugin@5.62.0
│ └─┬ eslint-plugin-jest@25.7.0
│   └── @typescript-eslint/eslint-plugin@8.26.0 deduped invalid: "^4.0.0 || ^5.0.0" from node_modules/eslint-plugin-jest
└─┬ typescript-eslint@7.18.0
  └── @typescript-eslint/eslint-plugin@7.18.0

typescript-eslint can be updated (done in MR), but eslint-config-react-app doesn't have an update (yet? might be abandonned). I've added an override which seems to work (peerDependencies didn't work), but that may need a follow up task to remove when we can.
Otherwise we may be able to use eslint-plugin-react instead.

I now get linting errors as expected:

...experience_builder/ui/src/hooks/useCopyPasteComponents.ts
  65:14  warning  'err' is defined but never used  @typescript-eslint/no-unused-vars

...experience_builder/ui/src/services/componentAndLayout.ts
  55:18  warning  'err' is defined but never used  @typescript-eslint/no-unused-vars