javascript - Google Translate Dropdown Not Found After Multiple Attempts in Next.js - Stack Overflow

I'm trying to implement Google Translate in my Next.js app, but I'm encountering an issue whe

I'm trying to implement Google Translate in my Next.js app, but I'm encountering an issue where the dropdown element is not found even after multiple attempts.

Error Message: Google Translate dropdown not found after multiple attempts. src\\app\\layout.js (73:19) @ eval

ty"use client";
import React, { useEffect, useState } from "react";
import "./globals.css";

const GlobeIcon = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns=";>
    <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" strokeWidth="2"/>
    <path d="M8 3H9C7 7 7 17 9 21H8" stroke="currentColor" strokeWidth="2"/>
    <path d="M15 3C17 7 17 17 15 21" stroke="currentColor" strokeWidth="2"/>
    <path d="M3 16V15C7 17 17 17 21 15V16" stroke="currentColor" strokeWidth="2"/>
    <path d="M3 9C7 7 17 7 21 9" stroke="currentColor" strokeWidth="2"/>
  </svg>
);

const ChevronIcon = () => (
  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
  </svg>
);

export default function RootLayout({ children }) {
  const [currentLang, setCurrentLang] = useState("en");
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  useEffect(() => {
    // Define the Google Translate initialization function
    window.googleTranslateElementInit = () => {
      try {
        new window.google.translate.TranslateElement(
          {
            pageLanguage: "en",
            includedLanguages: "en,es,de,pt",
            autoDisplay: false,
            layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE,
          },
          "google_translate_element"
        );
        console.log("✅ Google Translate initialized successfully.");
      } catch (error) {
        console.error("❌ Error initializing Google Translate:", error);
      }
    };

    // Inject the Google Translate script
    const script = document.createElement("script");
    script.src = ".js?cb=googleTranslateElementInit";
    script.async = true;
    script.onload = () => console.log("✅ Google Translate script loaded.");
    script.onerror = () => console.error("❌ Google Translate script failed to load.");
    document.body.appendChild(script);

    return () => {
      console.log("

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744046028a4549188.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信