[Bug]: v7.0.4 'No loader is configured for ".eot"

[kuhiga]

Describe the bug

info => Starting manager..
✘ [ERROR] No loader is configured for ".woff" files: packages/theme/src/css/fonts/apercu-pro-mono-regular/ApercuMono-Regular-Pro.woff

    packages/theme/src/css/fonts/index.css:17:8:
      17 │         url(apercu-pro-mono-regular/ApercuMono-Regular-Pro.woff) format('woff'),
         ╵         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".ttf" files: packages/theme/src/css/fonts/apercu-pro-black/Apercu-Black-Pro.ttf

    packages/theme/src/css/fonts/index.css:68:8:
      68 │         url(apercu-pro-black/Apercu-Black-Pro.ttf) format('truetype');
         ╵         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".ttf" files: packages/theme/src/css/fonts/apercu-pro-bold/Apercu-Bold-Pro.ttf

    packages/theme/src/css/fonts/index.css:56:8:
      56 │         url(apercu-pro-bold/Apercu-Bold-Pro.ttf) format('truetype');
         ╵         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".eot" files: packages/theme/src/css/fonts/apercu-pro-mono-light/ApercuMono-Light-Pro.eot

    packages/theme/src/css/fonts/index.css:3:9:
      3 │     src: url(apercu-pro-mono-light/ApercuMono-Light-Pro.eot);
        ╵          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ERR!  Error: Build failed with 24 errors:
ERR! packages/theme/src/css/fonts/index.css:3:9: ERROR: No loader is configured for ".eot" files: packages/theme/src/css/fonts/apercu-pro-mono-light/ApercuMono-Light-Pro.eot
ERR! packages/theme/src/css/fonts/index.css:4:9: ERROR: No loader is configured for ".eot" files: packages/theme/src/css/fonts/apercu-pro-mono-light/ApercuMono-Light-Pro.eot?#iefix
ERR! packages/theme/src/css/fonts/index.css:6:8: ERROR: No loader is configured for ".woff" files: packages/theme/src/css/fonts/apercu-pro-mono-light/ApercuMono-Light-Pro.woff
ERR! packages/theme/src/css/fonts/index.css:8:8: ERROR: No loader is configured for ".ttf" files: packages/theme/src/css/fonts/apercu-pro-mono-light/ApercuMono-Light-Pro.ttf
ERR! packages/theme/src/css/fonts/index.css:14:9: ERROR: No loader is configured for ".eot" files: packages/theme/src/css/fonts/apercu-pro-mono-regular/ApercuMono-Regular-Pro.eot

To Reproduce

main.ts

import { StorybookConfig } from '@storybook/react-webpack5';

const config: StorybookConfig = {
    framework: {
        name: '@storybook/react-webpack5',
        options: {},
    },
    features: {
        storyStoreV7: false, // 👈 Opt out of on-demand story loading storiesOf usage is gone
    },
    stories: ['../../**/*.story.tsx'],
    docs: {
        autodocs: true,
        defaultName: 'Docs', // set to change the name of generated docs entries
    },
    addons: [
        '@storybook/addon-docs',
        '@storybook/addon-controls',
        '@storybook/addon-actions',
        '@storybook/addon-viewport',
        '@storybook/addon-links',
        '@storybook/addon-knobs',
        '@storybook/addon-measure',
        '@storybook/addon-outline',
        '@storybook/addon-styling',
    ],
};
export default config;

I am importing a custom style sheet that loads ttf, eot woff files

Run npx storybook build

System

Environment Info:

  System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 3.5.0 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.49
    Firefox: 112.0
    Safari: 16.3
  npmPackages:
    @storybook/addon-actions: ^7.0.4 => 7.0.4
    @storybook/addon-controls: ^7.0.4 => 7.0.4
    @storybook/addon-docs: ^7.0.4 => 7.0.4
    @storybook/addon-knobs: ^7.0.0 => 7.0.0
    @storybook/addon-links: ^7.0.4 => 7.0.4
    @storybook/addon-measure: ^7.0.4 => 7.0.4
    @storybook/addon-outline: ^7.0.4 => 7.0.4
    @storybook/addon-styling: ^1.0.0 => 1.0.0
    @storybook/addon-viewport: ^7.0.4 => 7.0.4
    @storybook/addons: ^7.0.4 => 7.0.4
    @storybook/cli: ^7.0.4 => 7.0.4
    @storybook/react: ^7.0.4 => 7.0.4
    @storybook/react-webpack5: ^7.0.4 => 7.0.4
    @storybook/source-loader: ^7.0.4 => 7.0.4

Additional context

No response

[stof]

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)

[sam-higgs]

In the example above it is complaining about .ttf and .woff fonts as well. I am also experiencing a similar issue with .otf fonts.

[pinetree]

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(

[arnaldoperez]

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...
        ╵                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[rheaney-r7]

Also experiencing this 🤔

[visualjeff]

Same here. Storybook 7.0.7, Vite and @fontsource.

[shilman]

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! 🙏

[petter]

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');
        ╵            ~~~~~~~~~~~~~~~~~

[shilman]

I see, it's a manager-side issue. Makes sense. Thanks so much for the repro! I'll discuss with @ndelangen

[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

[arnaldoperez]

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.

[rheaney-r7]

agree with @arnaldoperez. Converting is not an option for us

[ndelangen]

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.

[rheaney-r7]

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

[dudif91]

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.

@ndelangen any new about that? i think storybook-vuetify-addon required it

[EmielH]

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

[ndelangen]

I opened a PR fixing this

[shilman]

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

[shilman]

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

[ggdaltoso]

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.

[shilman]

@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?

[ndelangen]

MP3 in the manager?

sure, why not?

[shilman]

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

[shilman]

¡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