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

Prince Bagthariya · Accepted Answer · 2023-12-26 09:26:12Z

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)

edited Dec 26, 2023 at 9:26

answered Dec 25, 2023 at 11:42

Prince Bagthariya

446 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ben Willett · Accepted Answer · 2023-12-28 20:25:16Z

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.

Collectives™ on Stack Overflow

Unable to edit the SharePoint page after adding Google Translate

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related