I’m working on a website where I’ve integrated a custom Google language translator. The translator changes the language correctly, but after changing the language, selecting a country in a form using ReactFlagsSelect throws the following errors:
Uncaught DOMException: Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.
at Cs (https://ship-my-stuff-staging.web.app/static/js/2.efc0a8e7.chunk.js:2:2511983)
…
Uncaught TypeError: Cannot read properties of undefined (reading ‘L’)
at _.oj (m=el_main:24:315)
…

Here’s the relevant part of my code:

import React, { useEffect, useRef, useState } from "react";
import { Container } from "reactstrap";
import ReactFlagsSelect from "react-flags-select";

function HeaderTop({ executeScroll, showNav }) {
  const [selectedCountry, setSelectedCountry] = useState('');
  const [selectedLanguage, setSelectedLanguage] = useState("");
  const languagesArray = ["en", "pt", "ar", "es", "af", "sq", "am", "da", "dv", "doi", "hmn", "pa", "qu", "lg", "lt", "ln", "is", "hu"];
  const languageRef = useRef(null);

  useEffect(() => {
    const country = JSON.parse(localStorage.getItem('Country'));
    if (country) {
      setSelectedCountry(country);
    }
  }, []);

  const handleLanguageChange = (language) => {
    setSelectedLanguage(language);
    updateGoogleTranslateLanguage(language);
  };

  const updateGoogleTranslateLanguage = (language) => {
    const translateSelect = document.querySelector(".goog-te-combo");
    if (translateSelect) {
      for (let i = 0; i < translateSelect.options.length; i++) {
        if (translateSelect.options[i].value === language) {
          translateSelect.selectedIndex = i;
          break;
        }
      }
      const event = new Event("change");
      translateSelect.dispatchEvent(event);
    }
  };

  useEffect(() => {
    const initializeGoogleTranslate = () => {
      const script = document.createElement("script");
      script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
      script.id = "google-translator-script";
      document.body.appendChild(script);
      window.googleTranslateElementInit = googleTranslateElementInit;
    };
    initializeGoogleTranslate();
  }, []);

  return (
    <>
      {showNav && (
        <div className="header_top">
          <Container className="d-flex align-items-center">
            {/* Your existing code */}
            <div ref={languageRef}>
              <Dropdown
                isOpen={dropdownLanguageOpen}
                toggle={toggleLanguageDropDown}
              >
                <DropdownToggle caret color="white" className="notranslate text-white">
                  {selectedLanguage}
                </DropdownToggle>
                <DropdownMenu>
                  {languagesArray.map((language, index) => (
                    <DropdownItem key={index} onClick={() => handleLanguageChange(language)}>
                      {language}
                    </DropdownItem>
                  ))}
                </DropdownMenu>
              </Dropdown>
              <div className="d-none">
                <div id="google_translate_element"></div>
              </div>
            </div>
          </Container>
        </div>
      )}
    </>
  );
}

export default HeaderTop;
I’ve tried initializing the Google Translator script in different useEffect hooks and verified that the element is correctly appended to the DOM. I also ensured that the language change event is correctly triggered.
I expected the language change to work seamlessly with the country selection. Instead, I encountered DOMException and TypeError errors.