Skip to content

Commit

Permalink
fix broken NextImage component
Browse files Browse the repository at this point in the history
ビルドしたStoryBookをChromaticや `npx http-server storybook-static` で立ち上げると以下のようなエラーが出る。

```
Uncaught TypeError: Cannot redefine property: default
    at Function.defineProperty (<anonymous>)
    at preview.jsx:6:8
```

これはStoryBook6.4.22から壊れているとのことで、このIssueでワークアラウンドが紹介されており、それで解決できた。
storybookjs/storybook#17950
  • Loading branch information
MH4GF committed Apr 23, 2022
1 parent a9accd8 commit 85aa1db
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 8 deletions.
3 changes: 3 additions & 0 deletions .storybook/NextImage.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import Image from 'next/image'
const NextImage = (props) => <Image unoptimized {...props} />
export default NextImage
1 change: 1 addition & 0 deletions .storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ module.exports = {
config.resolve.alias = {
...config.resolve.alias,
'~': path.resolve(__dirname, '../'),
'next/image': require.resolve('./NextImage.jsx'),
}

return config
Expand Down
8 changes: 0 additions & 8 deletions .storybook/preview.jsx → .storybook/preview.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,4 @@
import '../src/styles/tailwind.css'
import * as NextImage from 'next/image'

const OriginalNextImage = NextImage.default

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

export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
Expand Down

0 comments on commit 85aa1db

Please sign in to comment.