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)

Answer 2

Thanks for the suggestion. Require.js briefly appeared to have resolved the issue, but it quickly came back. I've been using the same app extension for the last 12 months without issue.

All of a sudden on December 8th, this "mismatched" error began occurring. The occur occurs when opening PDF files, along with the Hero and News Web Parts. A simple refresh will generally resolve the issue, but sometimes it takes several to get the page to load correctly.

The root cause for this error is definitely Google Translation services, but oddly it doesn't break the translation service; just these SharePoint components.

I actually have a ticket open with Microsoft support to learn what may have changed to start this "mismatched" error.

If/when I get a solution, I will post it here.