Doesn't support AVIF format

[johann-taberlet]

Describe the bug

Next image loader doesn't support avif format due to the use of the package image-size which doesn't support avif

Your minimal, reproducible example

None

Steps to reproduce

Add an <Image src="mum.avif" /> in a component which has a story. Run Storybook Crash with this stack trace:

ModuleBuildError: Module build failed (from ./node_modules/storybook-addon-next/dist/images/next-image-loader-stub.js):
TypeError: unsupported file type: undefined (file: undefined)
    at lookup (/Users/johann/Dev/lab/template/node_modules/image-size/dist/index.js:42:11)
    at imageSize (/Users/johann/Dev/lab/template/node_modules/image-size/dist/index.js:98:16)
    at Object.nextImageLoaderStub (/Users/johann/Dev/lab/template/node_modules/storybook-addon-next/dist/images/next-image-loader-stub.js:12:56)
    at processResult (/Users/johann/Dev/lab/template/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:758:19)
    at /Users/johann/Dev/lab/template/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/johann/Dev/lab/template/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/johann/Dev/lab/template/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at runSyncOrAsync (/Users/johann/Dev/lab/template/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:156:3)
    at iterateNormalLoaders (/Users/johann/Dev/lab/template/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:251:2)
    at /Users/johann/Dev/lab/template/node_modules/@storybook/builder-webpack5/node_modules/loader-runner/lib/LoaderRunner.js:224:4
    at /Users/johann/Dev/lab/template/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:834:15
    at Array.eval (eval at create (/Users/johann/Dev/lab/template/node_modules/@storybook/builder-webpack5/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
    at runCallbacks (/Users/johann/Dev/lab/template/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:27:15)
    at /Users/johann/Dev/lab/template/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:200:4
    at /Users/johann/Dev/lab/template/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)

WARN Broken build, fix the error above.

Expected behavior

Support avif format

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: MacOS Monterey 12.6, M1 pro chip
• Chrome

storybook-addon-next version

1.6.9

Additional context

Could be solved by using a package that supports avif format to get dimensions of images (e.g probe-image-size)

[github-actions[bot]]

This issue has been automatically marked stale because it it received no activity for 60 days. If you wish to keep this open, please leave a comment. Thanks.

[github-actions[bot]]

This issue has been automatically closed because it received no activity for 60 days. If you think this was closed by accident, please leave a comment. Thanks.

[RyanClementsHax]

Regarding the upcoming release of storybook v7 and the accompanying framework api that replaces this addon. I'm switching this package into "keep the lights on" mode and directing everyone using this addon to switch to storybook's framework api.

Please report any issues you have with migrating though :)