Closed kuhiga closed 1 year ago
Given Storybook 7 dropped support for IE11, and eot files were only used by IE, I would find it quite expected that the default bundler configuration removed the loader for eot files.
and your reproducer is not complete AFAICT (as there is no import of this CSS in the snippet you provided)
In the example above it is complaining about .ttf and .woff fonts as well. I am also experiencing a similar issue with .otf fonts.
After update to 7.x version I have the same error:
✘ [ERROR] No loader is configured for ".woff" files: src/Feature/Area/ic/assets/fonts/museosanscyrl-700-webfont.woff
src/Feature/Area/ic/assets/css/fonts.css:15:11:
15 │ src: url('../fonts/museosanscyrl-700-webfont.woff') format('woff'),
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✘ [ERROR] No loader is configured for ".woff" files: src/Feature/Area/ic/assets/fonts/HelveticaNeueDeskInterface-Regular.woff
src/Feature/Area/ic/assets/css/fonts.css:28:11:
28 │ src: url('../fonts/HelveticaNeueDeskInterface-Regular.woff') format('woff'),
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~```
No solution still found(
Having the same error in a nuxt project, using "storybook-addon-vuetify3": "^2.0.5"
✘ [ERROR] No loader is configured for ".ttf" files: node_modules/storybook-addon-vuetify3/node_modules/@mdi/font/fonts/materialdesignicons-webfont.ttf?v=6.9.96
node_modules/storybook-addon-vuetify3/node_modules/@mdi/font/css/materialdesignicons.min.css:1:356:
1 │ ...off?v=6.9.96") format("woff"),url("../fonts/materialdesignicons-webfont.ttf?v=6.9.96") format("truetype");font-weight:...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✘ [ERROR] No loader is configured for ".woff" files: node_modules/storybook-addon-vuetify3/node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff?v=6.9.96
node_modules/storybook-addon-vuetify3/node_modules/@mdi/font/css/materialdesignicons.min.css:1:283:
1 │ ...2?v=6.9.96") format("woff2"),url("../fonts/materialdesignicons-webfont.woff?v=6.9.96") format("woff"),url("../fonts/ma...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✘ [ERROR] No loader is configured for ".eot" files: node_modules/storybook-addon-vuetify3/node_modules/@mdi/font/fonts/materialdesignicons-webfont.eot?#iefix&v=6.9.96
node_modules/storybook-addon-vuetify3/node_modules/@mdi/font/css/materialdesignicons.min.css:1:116:
1 │ ...ebfont.eot?v=6.9.96");src:url("../fonts/materialdesignicons-webfont.eot?#iefix&v=6.9.96") format("embedded-opentype"),...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✘ [ERROR] No loader is configured for ".eot" files: node_modules/storybook-addon-vuetify3/node_modules/@mdi/font/fonts/materialdesignicons-webfont.eot?v=6.9.96
node_modules/storybook-addon-vuetify3/node_modules/@mdi/font/css/materialdesignicons.min.css:1:55:
1 │ ...y:"Material Design Icons";src:url("../fonts/materialdesignicons-webfont.eot?v=6.9.96");src:url("../fonts/materialdesig...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Also experiencing this 🤔
Same here. Storybook 7.0.7, Vite and @fontsource.
Does anybody have a reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏
Experiencing this as well 😬
@shilman here's a repro in Stackblitz: https://stackblitz.com/edit/github-yct3ar?file=.storybook/manager.ts. The error occurs in the .storybook/manager.ts
file which imports css to set up a font. This produces the following error:
info => Starting manager..
✘ [ERROR] No loader is configured for ".ttf" files: src/assets/OldLondon.ttf
src/assets/fonts.css:5:11:
5 │ src: url('./OldLondon.ttf') format('ttf');
╵ ~~~~~~~~~~~~~~~~~
I see, it's a manager-side issue. Makes sense. Thanks so much for the repro! I'll discuss with @ndelangen
Please convert the font-file to woff2, that's the only format we support in the manager.
This website will possibly do the job for you: https://cloudconvert.com/ttf-to-woff2
the bug occurred with fonts of frontend libraries, like vuetify, so converting the font files should not be a solution. It wouldn't be suitable for unassisted installation like in an automated test environment.
agree with @arnaldoperez. Converting is not an option for us
Here's the config in storybook's codebase: https://github.com/storybookjs/storybook/blob/6bb936306551ed01bb6e0f990fe4399151176d61/code/lib/builder-manager/src/index.ts#L53-L63
If all we need to add is support for .ttf
(for a while?), then I'm ok with that, but I'd like to draw the line somewhere.
Why does vuetify need .ttf
files exactly?
It wouldn't be suitable for unassisted installation like in an automated test environment.
Can you explain this more, I don't understand this.
In our project we need support to load .woff
, .tff
, .eot
.woff2
files for our fonts and icons, this has always been the case for us and has always worked in storybook without issue, it was only when we attempted to upgrade from SB 6.5.16
to 7.0.4
that the issue came up and fails on building/starting startbook
Here's the config in storybook's codebase:
If all we need to add is support for
.ttf
(for a while?), then I'm ok with that, but I'd like to draw the line somewhere.Why does vuetify need
.ttf
files exactly?It wouldn't be suitable for unassisted installation like in an automated test environment.
Can you explain this more, I don't understand this.
@ndelangen any new about that? i think storybook-vuetify-addon required it
We have the same issue with Vite and @fontsource. I added .woff
to the list of loaders in my local node_modules
folder and this fixes the problem for us, but of course this isn't a long-term solution. I'd be happy to create a PR to add .woff
(and could add .ttf
and .eot
in the process as well).
I opened a PR fixing this
Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.20 containing PR #22576 that references this issue. Upgrade today to the @future
NPM tag to try it out!
npx sb@next upgrade --tag future
ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.13 containing PR #22576 that references this issue. Upgrade today to the @latest
NPM tag to try it out!
npx sb@latest upgrade
Hey, @shilman
I'm trying to upgrade React95 to use SB7 but I was facing this issue and am glad with the fix. In my case, it wasn't enough and I'll describe more to help you and me with some context.
React95 uses Storybook 6 but I'm willing to move to v7 + replacing webpack with Vite 🔥. To do that, I look at the migration guide's docs. The first thing I did, was:
cd packages/core && npx storybook@latest upgrade
The second:
npx storybook@latest migrate csf-2-to-3 --glob="stories/*.stories.tsx"
The checker
npx @hipster/mdx2-issue-checker
And some TS adjustments 💅
When I tried to run the new script, storybook dev
in packages/core
subfolder:
yarn storybook dev
I saw an error as described in this issue. Googled about it and found this issue with your answer 🎉
So I spawned
npx sb@next upgrade --tag future
and all my issues with font files were gone but I'm still facing the same error with the .mp3
file. The audio file is ok and you can check it working on a Storybook + Vite project at StackBlitz
I'm working on a branch so it is easy to keep track of everything. There is also a reproducible StackBlitz link here.
@ggdaltoso thanks for the follow-up. when did you upgrade to v7? i've patched the changes from this PR back to 7.0.13, so you shouldn't need to upgrade to the @future
release anymore.
As for .mp3
support, @ndelangen WDYT about that?
MP3 in the manager?
sure, why not?
Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.21 containing PR #22699 that references this issue. Upgrade today to the @future
NPM tag to try it out!
npx sb@next upgrade --tag future
¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.15 containing PR #22699 that references this issue. Upgrade today to the @latest
NPM tag to try it out!
npx sb@latest upgrade
Describe the bug
To Reproduce
main.ts
I am importing a custom style sheet that loads
ttf
,eot
woff
filesRun
npx storybook build
System
Additional context
No response