Importing font files (*.woff, *.ttf)

[czebe]

Describe the bug

Loading fonts seems to be failing with:

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/.../node_modules/image-size/dist/index.js:52:11)
    at imageSize (/Users/.../node_modules/image-size/dist/index.js:104:16)

Webpack config shows that the font is being loaded via next-image-loader-stub:

{
    test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
        use: [
              {
                loader: '/Users/.../node_modules/storybook-addon-next/dist/images/next-image-loader-stub.js',
                options: { filename: 'static/media/[path][name][ext]' }
              }
        ]
  },

Perhaps it's because font files won't have a width and height?

storybook-addon-next/src/images/next-image-loader-stub.ts

Line 24 in 6583c20

const { width, height } = imageSizeOf(content)

Just guessing... Would love to hear your insights.
Thanks!

Your minimal, reproducible example

http://forking.example.on.codesandbox.fails.to.build

Steps to reproduce

1. add a font static asset
2. add css that imports font file
3. storybook start fails

Expected behavior

I expected static file imports to work as before, but next-image-loader-stub seems to be breaking.

How often does this bug happen?

No response

Screenshots or Videos

No response

Platform

• OS: MacOS X
• Node 16

storybook-addon-next version

v1.3.1

Additional context

No response

[RyanClementsHax]

Oops! You're totally right. I naively overwrote the storybook rule for asset compilation not realizing it also included fonts! Thanks for bringing this up.

Side note, the reproduction repo link doesn't work. Are you able to provide a working link? I just want to make sure I fix your problem for sure.

[RyanClementsHax]

Upon further review, the next-image-loader (the loader this addon in part mimics) is configured to only take these file extensions. storybook-addon-next should be updated accordingly to mimic what is happening in nextjs.

[czebe]

This is how storybook configures asset loaders. I’ll try to put together a minimal reproduction to exclude any other interference.

https://github.com/storybookjs/storybook/blob/e07fdc734f60e542f0f5f6339a31e34412113416/lib/builder-webpack5/src/preview/base-webpack.config.ts#L61

[czebe]

Here's a reproduction:

yarn dev vs yarn storybook

StackBlitz: https://stackblitz.com/edit/nextjs-bh4hfb?file=pages/index.tsx
Source: https://github.com/czebe/storybook-next-images-loader-repro

[andykenward]

Also running into a similar issue when using a custom svg webpack loader @svgr/webpack.

ModuleBuildError: Module build failed (from ./node_modules/storybook-addon-next/dist/images/next-image-loader-stub.js):
TypeError: unsupported file type: undefined (file: undefined)

Next.js has a check for custom svg webpack loaders here

[RyanClementsHax]

I was able to solve the issue with the pull request above. For anyone interested the TLDR is that after configuring the image loader for only the image types that the nextjs image loader takes, I needed to make sure that the css-loader was configured to handle imports and url's in css like nextjs does here. Lastly, I had to make sure that the images required by css was outputted as an asset.

A fix will come soon. I'm just refactoring the examples to include this case.

[RyanClementsHax]

Also running into a similar issue when using a custom svg webpack loader @svgr/webpack.

ModuleBuildError: Module build failed (from ./node_modules/storybook-addon-next/dist/images/next-image-loader-stub.js):
TypeError: unsupported file type: undefined (file: undefined)

Next.js has a check for custom svg webpack loaders here

@andykenward Would you mind opening an issue with your specific case and a reproduction repo? I'd love to help you out there.

[RyanClementsHax]

Also @czebe thanks for the reproduction repo. That was very helpful!

[github-actions]

🎉 This issue has been resolved in version 1.4.1 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[czebe]

Thanks Ryan! Fantastic work!
I noticed a different, smaller issue as well. Will open another ticket when I get a chance.