Object.defineProperty(NextImage, '__esModule', descriptor) is no more needed from next@12.1.7-canary.7

[kazukinagata]

Describe the bug

Storybook will throw an error TypeError: Cannot redefine property: __esModule at this line with using next@12.1.7-canary.7 or later.

Your minimal, reproducible example

none

Steps to reproduce

1. Use next version 12.1.7-canary.7 or later
2. run storybook
3. It gives the above error

Expected behavior

Working Storybook

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: Ubuntu 18.04.5
• Browser: Chrome 102.0.5005.63
• Node: v16.14.2
• Relevant packages:
  • next: ~12.1.7-canary.7

storybook-addon-next version

v1.6.6

Additional context

I did some digging and found that the default import of next/image has been fixed by this PR.

The built code looks like following, so you need not to redefine __esModule property on next-image-stub.tsx.

if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
  Object.defineProperty(exports.default, '__esModule', { value: true });
  Object.assign(exports.default, exports);
  module.exports = exports.default;
}

Related issues

• Storybook example is broken on Next 12.1.5 vercel/next.js#36417
• Next 12.1.5 error: Failed to parse src "static/media/public/nyan-cat.png" #72

[RyanClementsHax]

Thanks for opening up this issue.

When next.js releases the next version, I'll happily update this repo or accept any PRs to make this library work with it

[Otoris]

@tubbo

Do we need to make any changes to this snippet in our storybook preview.js file with this PR?

// De-optimize next.js images to work with storybook
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
});

[github-actions]

🎉 This issue has been resolved in version 1.6.7 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[RyanClementsHax]

@Otoris I believe that is no longer needed. The addon should do everything for you. If you come by any other issues feel free to open another issue.