ionic-team
eslint misconfigured (react-typescript)
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
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...
I have just scaffolded a fresh project using the CLI and can confirm that eslint still does not load.
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": {} } ] }
