Unable to edit the SharePoint page after adding Google Translate

Question

I am unable to edit the SharePoint page after adding Google Translate.

I have faced the below error.

Below are code snippets for googleTranslateElement used in the SPFx React web part.

const initializeLanguageTranslateElement = async () => {
    const addScript = document.createElement('script');
    addScript.setAttribute(
      'src',
      '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'
    );
    document.body.appendChild(addScript);
    window["googleTranslateElementInit"] = await languageTranslateElementInit;
  }
const languageTranslateElementInit = async () => {
    new window["google"].translate.TranslateElement(
      {
        defaultLanguage: 'en',
        includedLanguages: 'en,fr,de,ja,es,ar,ru,zh-CN',
      },
      'google_language_translate_element'
    );
    await onChangeLanguageTranslation();
  };
 
const onChangeLanguageTranslation = () => {
    setTimeout(async () => {
      const languageDropdown = await document.querySelector('.goog-te-combo');
      if (languageDropdown) {
        languageDropdown["value"] = 'en';
        languageDropdown.addEventListener('change', () => {
          const selectedLanguageValue = languageDropdown["value"];
          // Translate the page immediately after changing the language
          window["google"].translate.TranslateElement({ pageLanguage: selectedLanguageValue }, 'google_language_translate_element');
        });
        languageDropdown.dispatchEvent(new Event("change"));
      }
    }, 1000);
  }
<div id="google_language_translate_element">

Can anyone help me with the same?

Thanks

Answer 1

Just you have to load require js file in SPComponentLoader only for spfx for example :

• import { SPComponentLoader } from "@microsoft/sp-loader";(Imeplement in tsx file)
• SPComponentLoader.loadScript(your site url+ '/_layouts/15/require.js');(Imeplement in tsx file)