Adding hyperlink to page causes "Failed to construct 'CustomElement': The result must not have attributes.

[joe-alaska]

Please verify the version of auro-hyperlink you have installed

4.1.1

Please describe the bug

1. Create a hyperlink element in React that imports auro-hyperlink.
2. Place that anywhere in the app.

Reproducing the error

None

Expected behavior

Hyperlink should appear on page with no runtime errors.

What browsers are you seeing the problem on?

No response

Additional context

Code for my Hyperlink element:

import` '@aurodesignsystem/auro-hyperlink';
import React, { useEffect, useRef } from 'react';

const Hyperlink = ({ onClick, href, isButton, children }) => {
  const ref = useRef(null);
  useEffect(() => {
    const hyperlinkCurrentRef = ref.current;

    hyperlinkCurrentRef.addEventListener('click', (event) => {
      onClick(event);
    });

    return () => {
      hyperlinkCurrentRef.removeEventListener('click', (event) => {
        onClick(event);
      });
    };
  }, [ref, onClick]);

  return (
    // <auro-hyperlink ref={ref} href={href} role={isButton ? "button" : null}>
    <auro-hyperlink>
      {children}
    </auro-hyperlink>
  );
}

export default Hyperlink;

Using that hyperlink:

        <Hyperlink onClick={() => alert('have a nice day')} href="/mileageplan/retrocredit/v1" isButton={true}>
          this form.
        </Hyperlink>

Exit criteria

No response

[jason-capsule42]

https://stackoverflow.com/questions/43836886/failed-to-construct-customelement-error-when-javascript-file-is-placed-in-head

The problem here is almost certainly that you are dynamically creating the attribute and applying attributes on the element BEFORE you have inserted it into the DOM. Create the base element, append it into the DOM, and then add your attributes after.