The prop value with an expression type of PrivateIdentifier could not be resolved

[lionel-bijaoui]

Hello, I'm raising an issue as instructed by the error message.

// ...

"@typescript-eslint/eslint-plugin": "5.37.0",
"@typescript-eslint/parser": "5.37.0",
"ts-loader": "9.3.1",
"typescript": "4.8.3",

// ...

"eslint": "8.23.1",
"eslint-config-prettier": "8.5.0",
"eslint-formatter-friendly": "7.0.0",
"eslint-plugin-jsdoc": "39.3.6",
"eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-promise": "6.0.1",
"eslint-plugin-react": "7.31.8",
"eslint-plugin-sonarjs": "0.15.0",
"eslint-plugin-sort": "2.4.0",
"eslint-plugin-unicorn": "43.0.2",
"eslint-webpack-plugin": "3.2.0",
"webpack": "5.74.0",

// ...

node -v 
v16.16.0

npm why jsx-ast-utils
jsx-ast-utils@3.3.3 dev
node_modules/jsx-ast-utils
  jsx-ast-utils@"^3.3.2" from eslint-plugin-jsx-a11y@6.6.1        
  node_modules/eslint-plugin-jsx-a11y
    dev eslint-plugin-jsx-a11y@"6.6.1" from the root project      
  jsx-ast-utils@"^2.4.1 || ^3.0.0" from eslint-plugin-react@7.31.8
  node_modules/eslint-plugin-react
    dev eslint-plugin-react@"7.31.8" from the root project     

What info do you need ? Can I help ? Thank you for your time

[ljharb]

Thanks! Could you provide the code that's causing the crash?

[lionel-bijaoui]

It was fairly hard to get the origin.

Here is the AST fragment

 <ref *2> {
  type: 'PrivateIdentifier',
  name: 'route',
  range: [ 5391, 5420 ],
  loc: { start: { line: 159, column: 39 }, end: { line: 159, column: 68 } },
  parent: <ref *1> {
    type: 'MemberExpression',
    object: {
      type: 'ThisExpression',
      range: [Array],
      loc: [Object],
      parent: [Circular *1]
    },
    property: [Circular *2],
    computed: false,
    optional: false,
    range: [ 5386, 5420 ],
    loc: { start: [Object], end: [Object] },
    parent: {
      type: 'BinaryExpression',
      operator: '+',
      left: [Circular *1],
      right: [Object],
      range: [Array],
      loc: [Object],
      parent: [Object]
    }
  }
}

And the code is using a private member of a class. Here is an extract of the class

export class example {
    #route = null;

    template(args) {
        this.#route = args.route || null;
        if (this.#route != null) {
            this.#route += "/";
        }
        return ``;
    }

    onRender() {
        let footer = "";

        footer = (
            <footer class="text-center padding-10">
                <a class="button" fk-href={this.#route + "container-preparation/list/upcoming"}>
                    <svg>
                        <use xlink:href="#eye" />
                    </svg>{" "}
                    See more
                </a>
            </footer>
        );

        return footer;
    }
}

[ljharb]

Looks like this has the same testing problem as #112.

We'll have to upgrade the test suite to be able to parse private fields before fixing this.

A workaround in the meantime would be making the href value in a variable, and only putting the variable name inside the prop.

[lionel-bijaoui]

Thank you for your time and your help.

This is not a big problem, but tell me if I can help to fix it 😄