diff --git a/code/frameworks/nextjs/src/images/decorator.tsx b/code/frameworks/nextjs/src/images/decorator.tsx index f0917b3a3b50..97c50fafb28c 100644 --- a/code/frameworks/nextjs/src/images/decorator.tsx +++ b/code/frameworks/nextjs/src/images/decorator.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import type { Addon_StoryContext } from '@storybook/types'; -import { ImageContext } from './context'; + +const { ImageContext } = __non_webpack_require__('./images/context'); export const ImageDecorator = ( Story: React.FC, diff --git a/code/frameworks/nextjs/src/images/next-future-image.tsx b/code/frameworks/nextjs/src/images/next-future-image.tsx index 559d2e857d39..1b9689bfe370 100644 --- a/code/frameworks/nextjs/src/images/next-future-image.tsx +++ b/code/frameworks/nextjs/src/images/next-future-image.tsx @@ -3,9 +3,10 @@ import type * as _NextImage from 'next/image'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore import is aliased in webpack config import OriginalNextFutureImage from 'sb-original/next/future/image'; -import { ImageContext } from './context'; import { defaultLoader } from './next-image-default-loader'; +const { ImageContext } = __non_webpack_require__('./context'); + function NextFutureImage(props: _NextImage.ImageProps) { const imageParameters = React.useContext(ImageContext); diff --git a/code/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx index 74e252d93a7d..7c4324fe3ab9 100644 --- a/code/frameworks/nextjs/src/images/next-image.tsx +++ b/code/frameworks/nextjs/src/images/next-image.tsx @@ -3,9 +3,10 @@ import OriginalNextImage from 'sb-original/next/image'; import type * as _NextImage from 'next/image'; import React from 'react'; -import { ImageContext } from './context'; import { defaultLoader } from './next-image-default-loader'; +const { ImageContext } = __non_webpack_require__('./context'); + const MockedNextImage = (props: _NextImage.ImageProps) => { const imageParameters = React.useContext(ImageContext); diff --git a/code/frameworks/nextjs/src/images/next-legacy-image.tsx b/code/frameworks/nextjs/src/images/next-legacy-image.tsx index 8d899cc341a5..72f286af0b13 100644 --- a/code/frameworks/nextjs/src/images/next-legacy-image.tsx +++ b/code/frameworks/nextjs/src/images/next-legacy-image.tsx @@ -3,9 +3,10 @@ import OriginalNextLegacyImage from 'sb-original/next/legacy/image'; import type * as _NextLegacyImage from 'next/legacy/image'; import React from 'react'; -import { ImageContext } from './context'; import { defaultLoader } from './next-image-default-loader'; +const { ImageContext } = __non_webpack_require__('./context'); + function NextLegacyImage(props: _NextLegacyImage.ImageProps) { const imageParameters = React.useContext(ImageContext);