exception when used with with @angular-eslint/recommended

[drummer3333]

I want to use angular-eslint alongside with sonarjs to lint my angular app.

I setup my .eslintrc like recommended in https://github.com/angular-eslint/angular-eslint and added eslint-plugin-sonarjs to the extends:

Reproducer

module.exports = {
    /**
     * See packages/eslint-plugin/src/configs/README.md
     * for what this recommended config contains.
     */
    extends: [
        'plugin:@angular-eslint/recommended',
        'plugin:sonarjs/recommended'
    ],
    [...]
}

But executing the linter results in an error:

> ng lint frontend

Linting "frontend"...
An unhandled exception occurred: Cannot read property 'forEach' of undefined
Occurred while linting [path]/[angular-component].component.ts/1_inline-template.component.html:2
See "/tmp/ng-PCm2ut/angular-errors.log" for further details.

> cat /tmp/ng-PCm2ut/angular-errors.log
[error] TypeError: Cannot read property 'forEach' of undefined
Occurred while linting [path]/[angular-component].component.ts/1_inline-template.component.html:2
    at checkStatements ([path]/node_modules/eslint-plugin-sonarjs/lib/rules/no-element-overwrite.js:55:24)
    at Program ([path]/node_modules/eslint-plugin-sonarjs/lib/rules/no-element-overwrite.js:49:17)
    at [path]/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit ([path]/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector ([path]/node_modules/eslint/lib/linter/node-event-generator.js:254:26)
    at NodeEventGenerator.applySelectors ([path]/node_modules/eslint/lib/linter/node-event-generator.js:283:22)
    at NodeEventGenerator.enterNode ([path]/node_modules/eslint/lib/linter/node-event-generator.js:297:14)
    at CodePathAnalyzer.enterNode ([path]/node_modules/eslint/lib/linter/code-path-analysis/code-path-analyzer.js:711:23)
    at [path]/node_modules/eslint/lib/linter/linter.js:952:32

I tryed diffrent combinations with overrides so sonarjs is only applied to *.ts files but no success jet.

Expected behavior to lint the ts files with both, typescript/angular and sonarjs

I want to provide the following feedback.

Example

eslint-plugin-sonarjs version: "eslint-plugin-sonarjs": "^0.5.0",
eslint version: "eslint": "^7.6.0",
Node.js version: v14.9.0

[JorgeCoke]

Try this @drummer3333 :

... "extends": ["plugin:@angular-eslint/recommended"], "overrides": [ { "files": [".ts", ".tsx", ".js", ".jsx"], "extends": ["plugin:sonarjs/recommended"], }, ] ...

[vilchik-elena]

@drummer3333 could you provide us with a reproducer (.ts file)?

I believe angular plugin extracts HTML parts from .ts files into tmp files (like 1_inline-template.component.html in the log), but it's not clear why those are fed to our plugin

[d10n4t4n]

I had the same problem, I just declared all the rules without the one giving the excepction "no-element-overwrite", so the problem will be that you cant use this rule and cant have the recommended option. To save you time, ill just copy my rules here:

         // Bug detection
        "sonarjs/no-all-duplicated-branches": "error",
        "sonarjs/no-empty-collection": "error",
        "sonarjs/no-extra-arguments": "error",
        "sonarjs/no-identical-conditions": "error",
        "sonarjs/no-identical-expressions": "error",
        "sonarjs/no-ignored-return": "error",
        "sonarjs/no-one-iteration-loop": "error",
        "sonarjs/no-use-of-empty-return-value": "error",
        "sonarjs/non-existent-operator": "error",
        // Code smell detection
        "sonarjs/cognitive-complexity": "error",
        "sonarjs/elseif-without-else": "error",
        "sonarjs/no-collapsible-if": "error",
        "sonarjs/no-collection-size-mischeck": "error",
        "sonarjs/no-duplicate-string": "error",
        "sonarjs/no-duplicated-branches": "error",
        "sonarjs/no-gratuitous-expressions": "error",
        "sonarjs/no-identical-functions": "error",
        "sonarjs/no-inverted-boolean-check": "error",
        "sonarjs/no-nested-switch": "error",
        "sonarjs/no-nested-template-literals": "error",
        "sonarjs/no-redundant-boolean": "error",
        "sonarjs/no-redundant-jump": "error",
        "sonarjs/no-same-line-conditional": "error",
        "sonarjs/no-small-switch": "error",
        "sonarjs/no-unused-collection": "error",
        "sonarjs/no-useless-catch": "error",
        "sonarjs/prefer-immediate-return": "error",
        "sonarjs/prefer-object-literal": "error",
        "sonarjs/prefer-single-boolean-return": "error",
        "sonarjs/prefer-while": "error",

tldr: dont use the "no-element-overwrite" rule and dont set the recommended option.

[vilchik-elena]

@DionatanGG I think you can just disable the rule ("sonar/no-element-overwrite": "off") with enabled recommended profile (that way you get new rules as soon as update plugin)

[d10n4t4n]

@vilchik-elena I actually tried that before and didnt work, same error. Would be better if I could keep the recommended active. :(

[vilchik-elena]

@DionatanGG may be you could provide a small reproducer project then? then we could actually fix the problem :)

[mlebarron]

I'm hitting this too

  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nrwl/nx", "sonarjs"],
  "extends": ["plugin:@nrwl/nx/angular", "plugin:sonarjs/recommended"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {
        "sonar/no-element-overwrite": "off",
        "@typescript-eslint/no-explicit-any": "off"
      }
    },
    {
      "files": ["*.ts", "*.tsx"],
      "extends": ["plugin:@nrwl/nx/typescript"],
      "parserOptions": {
        "project": "./tsconfig.*?.json"
      },
      "rules": {
        "sonar/no-element-overwrite": "off",
        "@typescript-eslint/no-explicit-any": "off"
      }
    },
    {
      "files": ["*.js", "*.jsx"],
      "extends": ["plugin:@nrwl/nx/javascript"],
      "rules": {
        "sonar/no-element-overwrite": "off",
        "@typescript-eslint/no-explicit-any": "off"
      }
    }
  ]
}

any component.html where we've used *ngFor throws

Cannot read property 'forEach' of undefined
Occurred while linting /Users/mlebarron/code/.../component.html:1

[mlebarron]

okay so I did the "list all rules thing" and started enabling things one at a time.

when I enabled "sonarjs/no-same-line-conditional": "error" it reported

Cannot read property 'reduce' of undefined

when I enabled to "sonarjs/prefer-object-literal": "error"(leaving previous out) it reported

Cannot read property 'filter' of undefined

when I got to "sonarjs/no-element-overwrite": "error"(leaving previous out) it reported

Cannot read property 'forEach' of undefined

I also tried turning on recommended and then listing them all in the rules section and turning them off

  "extends": ["plugin:@nrwl/nx/angular", "plugin:sonarjs/recommended"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {
            "sonarjs/no-element-overwrite": "off",
            "sonarjs/no-same-line-conditional": "off",
            "sonarjs/prefer-object-literal": "off",
}
...

which resulted in the same "cannot read forEach" problem

[vilchik-elena]

@mlebarron can you provide such component.html? I want to reproduce locally

[BeCaDRI]

Are there any updates to this? I run into the same issue for nearly all html pages. But I got it fixed by adding

"sonarjs/no-element-overwrite": "off",
"sonarjs/no-same-line-conditional": "off",
"sonarjs/prefer-object-literal": "off",

to .html overrides!! With *.ts files I had no problem at all

[billy-briggs-dev]

This is still an issue in 2023...

[Wohops]

This issue has been migrated to Jira. ESLINTJS-9