Bug: no-dupe-class-members: Duplicate name ''.

[NinjaCross]

Environment

Node version: 17.2.0
npm version: 7.21.1
Local ESLint version: 8.4.1
Global ESLint version: 8.4.1
Operating System: Windows 10 Pro 64 bit

What parser are you using?

@babel/eslint-parser

What did you do?

Configuration

module.exports = {
    parser: "@babel/eslint-parser",
    rules: {
        "default-case": 2,
        "comma-spacing": 2,
        "comma-style": 2,
        "semi": ["error", "always"],
        "semi-spacing": ["error", {"before": false, "after": true}],
        "semi-style": ["error", "last"],
        "no-extra-semi": 2,
        "no-this-before-super": "error",
        "eqeqeq": "error",
        "no-async-promise-executor": 1,
        "constructor-super": 2,
        "for-direction": 2,
        "getter-return": 2,
        "no-class-assign": 2,
        "no-compare-neg-zero": 2,
        "no-cond-assign": 2,
        "no-const-assign": 2,
        "no-constant-condition": 2,
        "no-control-regex": 2,
        "no-debugger": 2,
        "no-dupe-args": 2,
        /*"no-dupe-class-members": 2,   DISABLED BECAUSE IT GIVES FALSE NEGATIVES*/
        "no-dupe-else-if": 2
    },
    parserOptions: {
        sourceType: "module",
        allowImportExportEverywhere: false,
        ecmaFeatures: {
            globalReturn: false

        },
        requireConfigFile: false,
        ecmaVersion: 2018,
        babelOptions: {},
    },
};

'use strict';

class MyItemEditDialog {

    modal = $('#myModal');
    retrievedTestCycles = [];
    retrievedItem = null;

    constructor() {
    }

    get modalTitle() {
        return "";
    }

    async showDialog() {

        try {

            this.retrievedTestCycles = await this.getGnappoCycle();
            this.retrievedItem = await this.getItemToEdit();

            const rootDiv = document.createElement('div');
            rootDiv.className = 'container';
            rootDiv.Id = 'rootDialogDiv';

         
            const div_testCycle = document.createElement('div');
            div_testCycle.className = "row p-2";

            const label_testCycle = document.createElement('label');
            label_testCycle.innerText = "Test Cycle:";
            label_testCycle.className = "col-6";

            const select_testCycle = this.#buildGnappoSelect();
            select_testCycle.className = "col-6";

            div_testCycle.appendChild(label_testCycle);
            div_testCycle.appendChild(select_testCycle);
            

      
            const div_pippero = document.createElement('div');
            div_pippero.className = "row p-2";

            const label_pippero = document.createElement('label');
            label_pippero.innerText = "Can be deleted?";
            label_pippero.className = "col-6";

            const checkbox_pippero = this.#buildPipperoCheckBox();

            div_pippero.appendChild(label_pippero);
            div_pippero.appendChild(checkbox_pippero);
         

            rootDiv.appendChild(div_testCycle);
            rootDiv.appendChild(div_pippero);

            this.initButtonListener();

            const modalBody = $('.modal-body');
            modalBody.empty();
            modalBody.append(rootDiv);

            $('#dialog-title').text(this.modalTitle);

            this.modal.modal("show");
            
        } catch (error) {
            console.log(error);
        }
    }

    async getItemToEdit() {
        // Overrided in the concrete class 
    }

    async saveEditItem() {
        // Overrided in the concrete class
    }

    initButtonListener() {
        document
            .getElementById("saveButton")
            .addEventListener(
                "click",
                async () => {
                    try {
                        await this.saveEditItem();
                    } catch (err) {

                    }
                });

    }

    async getGnappoCycle() {
        return new Promise((resolve, reject) => {
            myRestApiClient.GetGnapposCycles(
                testCycles => {
                    resolve(testCycles);
                },
                (error, jqXhr, textStatus, errorThrown) => {
                    reject(error);
                });
        });
    }
    
    #buildGnappoSelect() {
        const select = document.createElement('select');
        select.id = "myTestSelect";

        for (let lft of this.retrievedTestCycles) {
            const option = document.createElement('option');
            if (lft.id === this.retrievedItem.lifeTimeCycleId) {
                option.setAttribute('selected', 'selected');
            }
            option.setAttribute('value', lft.id);
            option.innerText = lft.name;
            option.setAttribute('title', lft.description);
            select.appendChild(option);
        }
        return select;
    }
    
    #buildPipperoCheckBox() {

        const checkBox = document.createElement('input');
        checkBox.type = "checkbox";
        checkBox.class = "form-check-input";
        checkBox.id = "myCanBeDeletedCheckbox";
        checkBox.checked = this.retrievedItem.canBeDeleted;

        return checkBox;
    }
}

What did you expect to happen?

No errors at all

What actually happened?

The following error is reported

[17:25:18] J:\MyFolder\MyItemEditDialog .js(126,5): error no-dupe-class-members : Duplicate name ''.

Participation

• I am willing to submit a pull request for this issue.

Additional comments

No response

[mdjermanovic]

Hi @NinjaCross, thanks for the issue!

I can't reproduce this with default parser, here's a lint-free online demo with the same code. I couldn't reproduce this with @babel/eslint-parser either.

Can you check which @babel/eslint-parser version you're using, and try with the latest version?

[NinjaCross]

@mdjermanovic here is my package.json

{
  "version": "1.0.0",
  "private": true,
  "engines": {
    "node": ">=17"
  },
  "scripts": {
    "test": "karma start ./resources/js/tests/karma.conf.js"
  },
  "devDependencies": {
    "assemblyscript": "^0.19.21",
    "assemblyscript-compile-cli": "^0.2.0",
    "chai": "^4.3.4",
    "fs": "^0.0.2",
    "glob": "^7.2.0",
    "gulp": "^4.0.2",
    "gulp-cli": "^2.3.0",
    "karma": "^6.3.9",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^3.1.0",
    "karma-mocha": "^2.0.1",
    "mocha": "^9.1.3",
    "gulp-clean": "^0.4.0",
    "gulp-eslint": "^6.0.0",
    "@babel/core": "^7.16.0",
    "@babel/eslint-parser": "^7.16.3"
  },
  "dependencies": {

  }
}

[mdjermanovic]

    "gulp-eslint": "^6.0.0",

This seems to be the problem. If you're running ESLint through gulp-eslint, then you are actually using ESLint 6 (see adametry/gulp-eslint#250), so that's why the no-dupe-class-members error is reported.

Can you try running ESLint 8.4.1 directly on the command line and see if the same error will be reported?

[NinjaCross]

@mdjermanovic I'll try that, and I'll let you know, thanks

[NinjaCross]

@mdjermanovic i tried with these settings ("eslint": "^8.4.1"), but nothing changed.

{
  "version": "1.0.0",
  "private": true,
  "engines": {
    "node": ">=17"
  },
  "scripts": {
    "test": "karma start ./resources/js/tests/karma.conf.js",
    "eslint": "gulp --gulpfile gulpFile.js run-eslint"
  },
  "devDependencies": {
    "assemblyscript": "^0.19.21",
    "assemblyscript-compile-cli": "^0.2.0",
    "chai": "^4.3.4",
    "fs": "^0.0.2",
    "glob": "^7.2.0",
    "gulp": "^4.0.2",
    "gulp-cli": "^1.4.0",
    "karma": "^5.2.3",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^3.1.0",
    "karma-mocha": "^2.0.1",
    "mocha": "^9.1.3",
    "gulp-clean": "^0.4.0",
    "gulp-eslint": "^6.0.0",
    "eslint": "^8.4.1",
    "@babel/core": "^7.16.0",
    "@babel/eslint-parser": "^7.16.3"
  },
  "dependencies": {}
}

[mdjermanovic]

Which command did you use to run ESLint? Can you try with npx eslint MyItemEditDialog.js? That runs ESLint directly, not through gulp. You can also run npx eslint -v to check the version.

[nzakas]

No response, so closing.