eslint misconfigured (react-typescript)

[crowbait]

Starter Type: react
Starter Template: all

Description:
eslint is misconfigured and doesn't load in a fresh project.
Output:

[Error - 5:01:53 PM] Calculating config file for file:///f%3A/zDev/Crowbait%20Development/SecuRead/node_modules/%40eslint/eslintrc/dist/eslintrc.cjs) failed.
Error [ERR_REQUIRE_ESM]: require() of ES Module F:\zDev\Crowbait Development\SecuRead\.eslintrc.js from F:\zDev\Crowbait Development\SecuRead\node_modules\@eslint\eslintrc\dist\eslintrc.cjs not supported.
.eslintrc.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead either rename .eslintrc.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in F:\zDev\Crowbait Development\SecuRead\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at c._load (node:electron/js2c/node_init:2:13672)
    at module.exports [as default] (F:\zDev\Crowbait Development\SecuRead\node_modules\import-fresh\index.js:32:59)
    at loadJSConfigFile (F:\zDev\Crowbait Development\SecuRead\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:2583:47)
    at loadConfigFile (F:\zDev\Crowbait Development\SecuRead\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:2667:20)
    at ConfigArrayFactory.loadInDirectory (F:\zDev\Crowbait Development\SecuRead\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:2877:34)
    at CascadingConfigArrayFactory._loadConfigInAncestors (F:\zDev\Crowbait Development\SecuRead\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:3871:46)
    at CascadingConfigArrayFactory._loadConfigInAncestors (F:\zDev\Crowbait Development\SecuRead\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:3890:20)
    at CascadingConfigArrayFactory._loadConfigInAncestors (F:\zDev\Crowbait Development\SecuRead\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:3890:20)
    at CascadingConfigArrayFactory._loadConfigInAncestors (F:\zDev\Crowbait Development\SecuRead\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:3890:20)
    at CascadingConfigArrayFactory._loadConfigInAncestors (F:\zDev\Crowbait Development\SecuRead\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:3890:20)
    at CascadingConfigArrayFactory.getConfigArrayForFile (F:\zDev\Crowbait Development\SecuRead\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:3792:18)
    at CLIEngine.isPathIgnored (F:\zDev\Crowbait Development\SecuRead\node_modules\eslint\lib\cli-engine\cli-engine.js:1000:18)
    at ESLint.isPathIgnored (F:\zDev\Crowbait Development\SecuRead\node_modules\eslint\lib\eslint\eslint.js:681:26)
    at c:\Users\fabia\.vscode\extensions\dbaeumer.vscode-eslint-3.0.10\server\out\eslintServer.js:1:23765
    at Object.M [as withClass] (c:\Users\fabia\.vscode\extensions\dbaeumer.vscode-eslint-3.0.10\server\out\eslintServer.js:1:19813)
    at async O.then.m.validate (c:\Users\fabia\.vscode\extensions\dbaeumer.vscode-eslint-3.0.10\server\out\eslintServer.js:1:23728)
    at async c:\Users\fabia\.vscode\extensions\dbaeumer.vscode-eslint-3.0.10\server\out\eslintServer.js:1:234417
    at async c:\Users\fabia\.vscode\extensions\dbaeumer.vscode-eslint-3.0.10\server\out\eslintServer.js:1:63886

My ionic info:

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'
       Require stack:
       - C:\Users\fabia\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\fabia\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\fabia\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\fabia\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

Ionic:
   Ionic CLI       : 7.2.0 (C:\Users\fabia\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework : @ionic/react 8.2.0

Capacitor:
   Capacitor CLI      : 6.0.0
   @capacitor/android : 6.0.0
   @capacitor/core    : 6.0.0
   @capacitor/ios     : not installed

Utility:
   cordova-res : not installed globally
   native-run  : 2.0.1

System:
   NodeJS : v20.13.1 (C:\Program Files\nodejs\node.exe)
   npm    : 10.5.2
   OS     : Windows 10

[crowbait]

Any help with finding a temporary workaround would be greatly appreciated. I don't know enough about the technical foundations of node and JS yet to figure this out myself...

[crowbait]

I have just scaffolded a fresh project using the CLI and can confirm that eslint still does not load.

[JesusGMM]

I have just scaffolded a fresh project using the CLI and can confirm that eslint still does not load.

{
"name": "template",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"lint": "ng lint"
},
"private": true,
"dependencies": {
"@angular/animations": "^19.0.0",
"@angular/common": "^19.0.0",
"@angular/compiler": "^19.0.0",
"@angular/core": "^19.0.0",
"@angular/forms": "^19.0.0",
"@angular/platform-browser": "^19.0.0",
"@angular/platform-browser-dynamic": "^19.0.0",
"@angular/router": "^19.0.0",
"@capacitor/app": "7.0.0",
"@capacitor/core": "7.0.1",
"@capacitor/haptics": "7.0.0",
"@capacitor/keyboard": "7.0.0",
"@capacitor/status-bar": "7.0.0",
"@ionic/angular": "^8.0.0",
"ionicons": "^7.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^19.0.0",
"@angular-eslint/builder": "^19.0.0",
"@angular-eslint/eslint-plugin": "^19.0.0",
"@angular-eslint/eslint-plugin-template": "^19.0.0",
"@angular-eslint/schematics": "^19.0.0",
"@angular-eslint/template-parser": "^19.0.0",
"@angular/cli": "^19.0.0",
"@angular/compiler-cli": "^19.0.0",
"@angular/language-service": "^19.0.0",
"@capacitor/cli": "7.0.1",
"@ionic/angular-toolkit": "^12.0.0",
"@types/jasmine": "~5.1.0",
"@typescript-eslint/eslint-plugin": "^8.18.0",
"@typescript-eslint/parser": "^8.18.0",
"eslint": "^9.16.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsdoc": "^48.2.1",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~5.1.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.6.3"
},
"description": "An Ionic project"
}

.eslintrc.json
{
"root": true,
"ignorePatterns": ["projects/**/"],
"overrides": [
{
"files": [".ts"],
"parserOptions": {
"project": ["tsconfig.json"],
"createDefaultProgram": true
},
"extends": [
"plugin:@angular-eslint/recommended",
"plugin:@angular-eslint/template/process-inline-templates"
],
"rules": {
"@angular-eslint/component-class-suffix": [
"error",
{
"suffixes": ["Page", "Component"]
}
],
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": "app",
"style": "kebab-case"
}
],
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": "app",
"style": "camelCase"
}
]
}
},
{
"files": ["*.html"],
"extends": ["plugin:@angular-eslint/template/recommended"],
"rules": {}
}
]
}