Importing font files (*.woff, *.ttf) about storybook-addon-next HOT 10 CLOSED

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

from storybook-addon-next.

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.

from storybook-addon-next.

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.

from storybook-addon-next.

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

from storybook-addon-next.

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

from storybook-addon-next.

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

from storybook-addon-next.

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.

from storybook-addon-next.

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.

from storybook-addon-next.

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

from storybook-addon-next.

🎉 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 📦🚀

from storybook-addon-next.