search

department-of-veterans-affairs / vets-design-system-documentation

Repository for design.va.gov website
https://design.va.gov
37 stars 57 forks source link

Loading Indicator web component throwing TypeError #1164

Open SpencerSaunders1 opened 2 years ago

SpencerSaunders1 commented 2 years ago

Hello from the VAS-UI team,

I'm currently trying to remove the React component instances of VA Loading Indicator and replace them with VA Loading Indicator web component instances. However, I'm getting the following console error when I add the web component version: TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

image

The import path I'm using is: import { VaLoadingIndicator } from '@department-of-veterans-affairs/component-library/dist/react-bindings';

A few months back, we tried switching to the web component version of VA Loading Indicator and I believe the same console error was appearing.

bkjohnson commented 2 years ago

Do you get this error if you just use the regular component without the React binding? i.e. <va-loading-indicator>.

Edit: Also, will you show me the surrounding context that this component is being used in?

SpencerSaunders1 commented 2 years ago

I tried using the regular component without the React binding and the error was still persisting. I was able to fix this bug by wrapping it as follows:

<div>
  <div>
     <va-loading-indicator />
  </div>
</div>

I think the reason why I needed to add the divs was because this particular instance of the loading indicator was in the root level file of the application and this instance of va-loading-indicator didn't have any parent tags surrounding it

.

Thanks for the help.

bkjohnson commented 2 years ago

The component does expect there to be a parent element so that it can fire an event for analytics once loading is finished. If your root document has a <body> tag you may not need those extra wrappers.

tlei123 commented 1 month ago

Hi, VADS Team! Has this bug descended into "permafrost"? My team-lead wants me to fix this Mutation Observer bug in my project, but this open ticket's leading me to believe I can't fix it from outside the component.

Has someone finished any analysis at least?

VenkatNaveenT commented 3 weeks ago

Hello VADS Team, wanted to check, if there is any way to fix the issue outside the component.

micahchiang commented 3 weeks ago

@tlei123 @VenkatNaveenT - can you both provide a little more context to where you are seeing this, steps to reproduce, etc? When I check something like va.gov/find-forms in production, which uses the loading indicator in several places, I do not see this console error fire.