From 243e42929de261b3baa44ebd31b2f32fb8eb03eb Mon Sep 17 00:00:00 2001
From: Zaiste <oh@zaiste.net>
Date: Fri, 9 Jul 2021 15:45:16 +0200
Subject: [PATCH] make `<Image>` Apple M1 comp (workaround)

---
 components/cart/CartItem/CartItem.tsx             | 11 ++++++++++-
 components/product/ProductCard/ProductCard.tsx    | 11 ++++++++++-
 components/product/ProductView/ProductView.tsx    | 11 ++++++++++-
 components/wishlist/WishlistCard/WishlistCard.tsx | 11 ++++++++++-
 4 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx
index a59024e06..c15888b90 100644
--- a/components/cart/CartItem/CartItem.tsx
+++ b/components/cart/CartItem/CartItem.tsx
@@ -1,6 +1,6 @@
 import { ChangeEvent, FocusEventHandler, useEffect, useState } from 'react'
 import cn from 'classnames'
-import Image from 'next/image'
+import NextImage from 'next/image'
 import Link from 'next/link'
 import s from './CartItem.module.css'
 import { Trash, Plus, Minus, Cross } from '@components/icons'
@@ -11,6 +11,15 @@ import useUpdateItem from '@framework/cart/use-update-item'
 import useRemoveItem from '@framework/cart/use-remove-item'
 import Quantity from '@components/ui/Quantity'
 
+const Image = (props: any) => {
+  return (
+    <NextImage
+      unoptimized={process.env.NODE_ENV === 'development'}
+      {...props}
+    />
+  );
+}
+
 type ItemOption = {
   name: string
   nameId: number
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 39c19db00..23942d89d 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -3,10 +3,19 @@ import cn from 'classnames'
 import Link from 'next/link'
 import type { Product } from '@commerce/types/product'
 import s from './ProductCard.module.css'
-import Image, { ImageProps } from 'next/image'
+import NextImage, { ImageProps } from 'next/image'
 import WishlistButton from '@components/wishlist/WishlistButton'
 import usePrice from '@framework/product/use-price'
 import ProductTag from '../ProductTag'
+
+const Image = (props: any) => {
+  return (
+    <NextImage
+      unoptimized={process.env.NODE_ENV === 'development'}
+      {...props}
+    />
+  );
+}
 interface Props {
   className?: string
   product: Product
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index f689030d6..ce761bb08 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import Image from 'next/image'
+import NextImage from 'next/image'
 import { NextSeo } from 'next-seo'
 import s from './ProductView.module.css'
 import { FC } from 'react'
@@ -10,6 +10,15 @@ import { ProductSlider, ProductCard } from '@components/product'
 import { Container, Text } from '@components/ui'
 import ProductSidebar from '../ProductSidebar'
 import ProductTag from '../ProductTag'
+
+const Image = (props: any) => {
+  return (
+    <NextImage
+      unoptimized={process.env.NODE_ENV === 'development'}
+      {...props}
+    />
+  );
+}
 interface ProductViewProps {
   product: Product
   relatedProducts: Product[]
diff --git a/components/wishlist/WishlistCard/WishlistCard.tsx b/components/wishlist/WishlistCard/WishlistCard.tsx
index dfc1165c2..deeb4597d 100644
--- a/components/wishlist/WishlistCard/WishlistCard.tsx
+++ b/components/wishlist/WishlistCard/WishlistCard.tsx
@@ -1,7 +1,7 @@
 import { FC, useState } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
-import Image from 'next/image'
+import NextImage from 'next/image'
 import s from './WishlistCard.module.css'
 import { Trash } from '@components/icons'
 import { Button, Text } from '@components/ui'
@@ -12,6 +12,15 @@ import usePrice from '@framework/product/use-price'
 import useAddItem from '@framework/cart/use-add-item'
 import useRemoveItem from '@framework/wishlist/use-remove-item'
 
+const Image = (props: any) => {
+  return (
+    <NextImage
+      unoptimized={process.env.NODE_ENV === 'development'}
+      {...props}
+    />
+  );
+}
+
 interface Props {
   product: Product
 }