Closed
Description
openedon Oct 20, 2023
Describe the bug
The next-image-loader-stub uses the image-size library to get the dimensions of an image to then transform it into the expected shape of image imports in next.js:
But the image-size library does not support avif files, which leads to errors like this when trying to compile storybook:
ERROR in ./src/assets/images/home/lp_hero.avif undefined
Module build failed (from ./node_modules/@storybook/nextjs/dist/next-image-loader-stub.js):
TypeError: unsupported file type: undefined (file: ./src/assets/images/home/lp_hero.avif)
at lookup (./node_modules/image-size/dist/index.js:42:11)
at imageSize (./node_modules/image-size/dist/index.js:113:16)
at Object.nextImageLoaderStub (./node_modules/@storybook/nextjs/dist/next-image-loader-stub.js:1:1144)
To Reproduce
I created a new next.js app with a simple reproduction: https://github.com/noranda/storybook-nextjs-avif-bug
System
Environment Info:
System:
OS: macOS 13.5.1
CPU: (10) arm64 Apple M1 Pro
Binaries:
Node: 18.17.1 - ~/.asdf/installs/nodejs/18.17.1/bin/node
Yarn: 1.22.19 - ~/.asdf/installs/nodejs/18.17.1/.npm/bin/yarn
npm: 9.6.7 - ~/.asdf/plugins/nodejs/shims/npm
Browsers:
Chrome: 118.0.5993.88
Firefox: 105.0.2
Safari: 17.0
npmPackages:
@storybook/addon-actions: ^7.2.0 => 7.2.0
@storybook/addon-essentials: ^7.2.0 => 7.2.0
@storybook/addon-interactions: ^7.2.0 => 7.2.0
@storybook/addon-links: ^7.2.0 => 7.2.0
@storybook/addon-viewport: ^7.2.2 => 7.2.2
@storybook/addons: ^7.2.0 => 7.2.0
@storybook/core-events: ^7.2.0 => 7.2.2
@storybook/jest: ^0.1.0 => 0.1.0
@storybook/nextjs: ^7.2.0 => 7.2.0
@storybook/preview-api: ^7.2.0 => 7.2.2
@storybook/react: ^7.2.0 => 7.2.0
@storybook/testing-library: ^0.1.0 => 0.1.0Additional context
No response
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Metadata
Assignees
Type
Projects
Status
Done