Missing target element even with an if

I have a controller with a button to show the password

toggleShowPassword() {
    if(this.showPasswordTarget.checked) {
      // The registrations controller is used on the login page and there is no password confirmation there
      if(this.passwordConfirmationTarget) {
    } else {

The passwordConfigurationTarget is optional. On the login form there is not such target.

Despite this and error occurs:

application.js:250 Error invoking action "change->registrations#toggleShowPassword"

Error: Missing target element "registrations.passwordConfirmation"
    at Controller.get (target_properties.js:15)
    at Controller.toggleShowPassword (registrations_controller.js:43)
    at Binding.invokeWithEvent (binding.js:60)
    at Binding.handleEvent (binding.js:33)
    at EventListener.handleEvent (event_listener.js:40)

So I am checking for the target as mentioned in Optional Targets https://stimulusjs.org/reference/targets#optional-targets but there is an error.

Offf, saw it now. It should be this.hasPasswordConfigurationTarget

Isn’t it great when you spot your issue immediately after pressing Send!

Happens every time for me.


I guess it is the moment you stop looking at the problem for a couple of minutes, you distract yourself with Log in and create a post on the forum, you post, and… you now look with fresh eyes on the problem and you are … “how could I’ve missed this…”

Been there, done that.

More times than I want to admit