diff --git a/site/components/common/I18nWidget/I18nWidget.tsx b/site/components/common/I18nWidget/I18nWidget.tsx
index d09dd1d6d..7c9124e3e 100644
--- a/site/components/common/I18nWidget/I18nWidget.tsx
+++ b/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">
diff --git a/site/components/ui/context.tsx b/site/components/ui/context.tsx
index 5af8c0bb8..0a89a0a05 100644
--- a/site/components/ui/context.tsx
+++ b/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]
   )
 
diff --git a/site/lib/focus-trap.tsx b/site/lib/focus-trap.tsx
index d886d6df2..7f37a8c9f 100644
--- a/site/lib/focus-trap.tsx
+++ b/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(
diff --git a/site/next.config.js b/site/next.config.js
index 22ecc1e17..744c4cf0e 100644
--- a/site/next.config.js
+++ b/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