Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
lionel-bijaoui opened this issue Sep 22, 2022 · 4 comments

Comments

@lionel-bijaoui
Copy link

lionel-bijaoui commented Sep 22, 2022

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
[email protected] dev
node_modules/jsx-ast-utils
  jsx-ast-utils@"^3.3.2" from [email protected]        
  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 [email protected]
  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
Copy link
Member

ljharb commented Sep 22, 2022

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

@lionel-bijaoui
Copy link
Author

lionel-bijaoui commented Sep 26, 2022

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
Copy link
Member

ljharb commented Sep 26, 2022

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
Copy link
Author

Thank you for your time and your help.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

2 participants