Storybook example is broken on Next 12.1.5

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Windows 10 - 64bit with npm@latest. The issue probably exists on all environments.

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

next/image changes in 12.1.5 broke static image imports of the Storybook example.

Failed to parse src "static/media/public/nyan-cat.png" on next/image, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)

I’ve confirmed that the issue exists in 12.1.6-canary.6.

Expected Behavior

Images rendering without an error message.

To Reproduce

npx create-next-app --example with-storybook with-storybook-app npm run storybook Navigate to the Nextjs Images Page tab.

[diegohmac]

Thank you @RyanClementsHax !

This is how it worked for me following Ryan’s approach:

import * as NextImage from "next/image";

const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, "default", {
  configurable: true,
  value: (props) => typeof props.src === 'string' ? (
    <OriginalNextImage {...props} unoptimized blurDataURL={props.src} />
  ) : (
    <OriginalNextImage {...props} unoptimized />
  ),
});

Object.defineProperty(NextImage, "__esModule", {
  configurable: true,
  value: true
});

[RyanClementsHax]

After diving deeper into the code I found the root of the issue.

The generated code mentioned above makes the following assignments:

Object.assign(exports.default, exports);
module.exports = exports.default;

For some reason, __esModule: true isn’t preserved on module.exports

console.log('before', module.exports.__esModule) // true

if (typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) {
    Object.assign(exports.default, exports);
    module.exports = exports.default;
}

console.log('after', module.exports.__esModule) // undefined

In order for import Image from 'next/image' to get module.exports.default instead of module.exports, __esModule: true needs to be present on module.exports.

This means that the webpack runtime is treating the export from next/image as if it shouldn’t be treated as an esm, which is what the code that disables image optimization requires:

import * as NextImage from "next/image";

const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, "default", {
  configurable: true,
  value: (props) => <OriginalNextImage {...props} unoptimized />,
});

Consequently, because we aren’t disabling image optimization, we are getting a bunch of errors as image optimization doesn’t work outside of a nextjs environment.

Therefore, my question to the maintainers is if __esModule: true should be set, thus meaning that this is a bug, or if this is intended behavior and we should come up with a different solution such as the code below:

import * as NextImage from "next/image";

const OriginalNextImage = NextImage.default;

NextImage.default = props =>
  typeof props.src === 'string' ? (
    <OriginalNextImage {...props} unoptimized blurDataURL={props.src} />
  ) : (
    <OriginalNextImage {...props} unoptimized />
  );

NextImage.__esModule = true;

(The above code feels hacky so if anyone has any better approaches, I’m all ears)