[Bug]: @storybook/nextjs unable to import avif

[noranda]

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:

storybook/code/frameworks/nextjs/src/next-image-loader-stub.ts

Line 21 in 50f3fdb

const { width, height } = imageSizeOf(this.resourcePath);

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.0

Additional context

No response