جاوااسکریپت - چه عواملی باعث هشدار NextJS میشود: «ویژگیهای اضافی از سرور: data-new-gr-c-s-check-loaded...»

من هشدار زیر را از برنامه NextJS خود دریافت میکنم:

هشدار: ویژگیهای اضافی از سرور: data-new-gr-c-s-check-loaded, data-gr-ext-installed, cz-shortcut-listen, data-lt-installed

نمیدانم چرا این اتفاق میافتد، توضیح این چیست؟

پاسخ شماره ۱

این معمولاً بهعلت یک افزونه ایجاد میشود که این ویژگیهای اضافی را همراه با کد شما هنگام اجرا در مرورگر، که سعی در تعامل با رابط کاربری دارد، منتقل میکند. این باعث ایجاد ناسازگاری بین چیزی که روی سرور رندر شده و چیزی که روی کلاینت رندر میشود میشود.

افزونههایی مشابه Grammarly، ColorZilla و LanguageTool بنابراین علت این هشدار هستند، بنابراین باید بفهمید کدام یک این کار را انجام میدهد و سپس خاموش/پیکربندی کنید تا روی پورتی که معمولاً برای توسعه استفاده میکنید اجرا نشود. این راهحل مستقیم برای هشدار است، زیرا همیشه توصیه میشود از افزونهها در محیط توسعه اجتناب کنید.

شما میتوانید آن ویژگیهای اضافی را اگر کد HTML خالص برنامه را در بخش Elements ابزارهای توسعه بررسی کنید، پیدا کنید

معمولاً از اختصارات استفاده میشود، مانند اینجا، lt مخفف LanguageTool است، gr برای Grammaly، و cz برای ColorZilla. این میتواند در شناسایی افزونه کمک کند.

خوب است بدانید:

میتوانید هشدارهای هیدراسیون را با تنظیم suppressHydrationWarning به true در تگ باز <body> در RootLayout سرکوب کنید:

export default RootLayout({ children }) {
  return (
   <html lang="en">
      <body suppressHydrationWarning={true}>
        {children}
      </body>
    </html>
  )
}

گاهی اوقات باید آن را در تگ باز <html> قرار دهید اگر ویژگیها در آنجا اضافه شوند

<html lang="en" suppressHydrationWarning={true}>

suppresshydrationwarning فقط یک سطح عمیق کار میکند، بنابراین اگر آن را در عنصر <html> قرار دهید، هشدارهای hydration برای عنصر <body> را سرکوب نخواهد کرد زیرا در سطح عمیقتری قرار دارد، این عالی است! زیرا ما نمیخواهیم هشدارهای hydration برای کامپوننتهای سرور خود که در سطح عمیقتری هستند سرکوب شود.

پاسخ شماره ۲

غیرفعال کردن افزونه گرامرلی مشکل را برای من حل کرد.

پاسخ شماره ۳

کروم یک ویژگی جدید برای غیرفعال کردن افزونهها برای URL های خاص منتشر کرده است که بسیار عالی است، زیرا به نظر میرسد این هشدار تنها یک مشکل محیط توسعه باشد. به سادگی chrome://flags/#extensions-menu-access-control را در مرورگر کروم خود وارد کنید تا این پرچم فعال شود و کروم را مجددا راهاندازی کنید.

پس از راهاندازی مجدد، میتوانید روی آیکون افزونهها (در گوشه بالا سمت راست مرورگر خود) کلیک کنید، در حالی که در حال مرور URL http://localhost:3000 هستید، تا افزونههای خود را فقط برای آن URL غیرفعال کنید! نیازی به استفاده از ویژگی suppressHydrationWarning={true} که در بالا ذکر شد، نیست.

پاسخ شماره ۴

غیرفعال کردن افزونه ColorZilla مشکل را برای من حل کرد.

پاسخ شماره ۵

افزونههای ColorZilla و Grammarly را متوقف کن تا مشکل من حل شود.

بهروزرسانی: افزونههای بیشتری که مشکلات مرتبط ایجاد میکنند:

• ColorZilla
• گرامرلی

• ویکیوند: ویکیپدیا بهروز شده

  • پیغام خطا: هشدار: ویژگیهای اضافی از سرور: style
  • راه حل: گزینه دسترسی سایت افزونه را از روی تمام سایتها به روی سایتهای خاص تغییر دهید و URL زیر را وارد کنید: https://*.wikipedia.org/*

پاسخ شماره ۶

فقط میخواستم به این اضافه کنم - اگر کسی از افزونه کروم Grammarly یا افزونههای مشابه استفاده میکند، این همان مشکل را ایجاد میکند چون این ویژگیها را به تگ <body/> اضافه میکند

من همان هشدار را دریافت میکردم و نمیتوانستم دلیل آن را متوجه شوم، فکر میکردم مشکل از کتابخانه رابط کاربری من است، اما سپس با کمک جامعه توانستیم متوجه شویم که مشکل از یک افزونه کروم بود.

وقتی Grammarly را حذف کردم، این هشدار دیگر هرگز برنگشت! امیدوارم این برای هر کس دیگری که در همان وضعیت است و به این پست هدایت میشود، مفید باشد!