Ignore warnings

site/components/common/I18nWidget/I18nWidget.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/router'
 import s from './I18nWidget.module.css'
 import { Cross, ChevronUp } from '@components/icons'
 import ClickOutside from '@lib/click-outside'
+import Image from 'next/image'
 interface LOCALE_DATA {
   name: string
   img: {
@@ -50,12 +51,13 @@ const I18nWidget: FC = () => {
           onClick={() => setDisplay(!display)}
         >
           <button className={s.button} aria-label="Language selector">
-            <img
+            <Image
               width="20"
               height="20"
               className="block mr-2 w-5"
               src={`/${LOCALES_MAP[currentLocale].img.filename}`}
               alt={LOCALES_MAP[currentLocale].img.alt}
+              unoptimized
             />
             {options && (
               <span className="cursor-pointer">

site/components/ui/context.tsx

@@ -195,6 +195,7 @@ export const UIProvider: FC<{ children?: ReactNode }> = (props) => {
       setSidebarView,
       setUserAvatar,
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [state]
   )
 

site/lib/focus-trap.tsx

@@ -53,6 +53,7 @@ export default function FocusTrap({ children, focusFirst = false }: Props) {
     return () => {
       returnFocus()
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [root, children])
 
   return React.createElement(

site/next.config.js

@@ -35,6 +35,11 @@ module.exports = withCommerceConfig({
         },
     ].filter(Boolean)
   },
+
+  // Avoid Module not found: ESM packages (supports-color) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
+  experimental: {
+    esmExternals: 'loose',
+  },
 })
 
 // Don't delete this console log, useful to see the commerce config in Vercel deployments