"Error: There is more than one beacon named <beaconname>" when there isn't

[havremunken]

I have a component, flyout-menu, in an Octane app, that is used in a Tailwind navbar and also surrounded with <AnimatedBeacon @name={{this.beaconTitle}}>. The component is used more than once in the navbar, so the beacon name is based on a computed property that is unique per instance. When the flyout-menu component is clicked, it triggers a transition generator function to animate the menu contents onto the screen. The function uses sprite.startAtSprite(beacons[this.beaconTitle)] for insertedSprites and sprite.endAtSprite(beacons[this.beaconTitle)] for removedSprites to compose a parallel animation consisting of opacity, move and scale. Pretty basic stuff.

However, when I trigger the animation by clicking on a menu, I get two errors per existing beacon in the console: "There is more than one beacon named ". I have used the Chrome debugger to find where the error is thrown in the MotionService:

    if (this._beacons[name]) {
      throw new Error(`There is more than one beacon named "${name}"`);
    }

It is first called once per beacon name, and no error is thrown. It is then called twice more for the first beacon name (throwing two errors), then twice more with the second beacon name. Then the animation proceeds to work as expected (or perhaps unexpected, given the errors).

When I click somewhere to trigger the closing animation again, the same thing happens - four complaints about duplicate names, two for each of the beacons that actually exist.

As far as I can tell (with my very limited knowledge) the <AnimatedBeacon> doesn't actually put anything tangible into the DOM element structure, so it is hard to search for any duplicate element there. I have searched my source code, and the only place I invoke the AnimatedBeacon component is in the flyout-menu component - and that is only ever being used twice (currently), side by side in the navbar.

Is this some sneaky bug, or is there a way for me to debug why it apparently tries to add muh beacons to this._beacons multiple time in MotionService?

Ember 3.18, ember-animated 0.10.1. Any other information or testing needed, just let me know! Thanks!

[nightire]

I'm not sure but only giving a suggestion, have you tried with Ember Inspector to ensure there aren't any extra <AnimatedBeacon> instances that use the same beacon name in the view?

[jrock2004]

I am seeing the same issues. Here is the code I have

<AnimatedBeacon @name="yourApptd">
  <div class="mt-4 grid gap-3">
    {{#each this.model.apptCards as |appt|}}
      <ApptCard
        @appt={{appt}}
        @staffList={{this.model.staff}}
        @showStaff={{this.showStaff}}
        @selectedAppt={{this.selectedAppt}}
        @toggleShowStaffEvent={{this.toggleShowStaff}}
      />
    {{/each}}
  </div>
</AnimatedBeacon>

For me, I do not see the error message till I click on one of the appt cards

[havremunken]

Sorry for the slow response, been stuck on another branch.

@nightire Thanks for your suggestion - I checked with Ember Inspector, doing a search for AnimatedBeacon shows only two beacons in the app, and they have unique names. So there are no apparent duplicate beacons.

@jrock2004 That seems very similar to what I am experiencing, no errors when the app loads, but once I as a user push a flyout-menu, it immediately complains about a duplicate, while the menu animates on as expected. Weird stuff...

[nathanielasare]

Having a similar issue and it appears there is an initial duplicate in the process

[chanderhan]

Did anyone find a solution to this?

EDIT: I'm having trouble reproducing this simply.

[ef4]

I think this can happen when some other component crashes during rendering. The error message is unhelpful but not the real source of the bug. Look for the original crash, it comes first.

[mattmarcum]

I ran into this problem today - only one beacon on the page - but I get an error for every animated-container/animated-if that renders on the page. No errors in the console from anything other than this beacon error. I removed all the content from the animated-if and I still got the error.

[mattmarcum]

https://codesandbox.io/s/autumn-violet-fl453n. - open up your dev-tools console and then click the toggle button. I get an error for each animated-if.

[mattmarcum]

https://codesandbox.io/s/stoic-hertz-yzm3pz I went ahead and added transitions, but its still the same error.

[SergeAstapov]

Looks like this was fixed by #458.
Big thanks to @mattmarcum!

Until #458 is published as minor/patch version, you may use [email protected] version for now.