fix: nextjs images in storybook

services/web-app/.storybook/NextImage.js

@@ -0,0 +1,27 @@
+/*
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import clsx from 'clsx'
+
+// `node_modules` import is necessary to not create a cyclically resolving alias
+import Image from '../../../node_modules/next/image'
+import styles from './next-image.module.scss'
+
+const NextImage = (props) => {
+  const modifiedProps = { ...props, layout: 'fill' }
+
+  delete modifiedProps.className
+  delete modifiedProps.placeholder
+
+  return (
+    <div className={clsx(styles['image-container'], props.className)}>
+      <Image {...modifiedProps} className={styles.image} unoptimized />
+    </div>
+  )
+}
+
+export default NextImage

services/web-app/.storybook/main.js

@@ -56,6 +56,9 @@ module.exports = withYaml({
       include: path.resolve(__dirname, '..')
     })
 
+    // Use custom unoptimized image instead of Next.js Image
+    config.resolve.alias['next/image'] = require.resolve('./NextImage.js')
+
     return config
   }
 })

services/web-app/.storybook/preview.js

@@ -9,30 +9,7 @@ import '../styles/styles.scss'
 
 import { breakpoints } from '@carbon/layout'
 import { Theme } from '@carbon/react'
-import clsx from 'clsx'
 import { RouterContext } from 'next/dist/shared/lib/router-context'
-import * as NextImage from 'next/image'
-
-import styles from './styles.module.scss'
-
-const OriginalNextImage = NextImage.default
-
-// eslint-disable-next-line no-import-assign -- Forcefully disable Next image optimization
-Object.defineProperty(NextImage, 'default', {
-  configurable: true,
-  value: (props) => {
-    const modifiedProps = { ...props, layout: 'fill' }
-
-    delete modifiedProps.className
-    delete modifiedProps.placeholder
-
-    return (
-      <div className={clsx(styles['image-container'], props.className)}>
-        <OriginalNextImage {...modifiedProps} className={styles.image} unoptimized />
-      </div>
-    )
-  }
-})
 
 export const decorators = [
   (Story, context) => {