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

kuhiga · 2023-04-15T01:13:22Z

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

The text was updated successfully, but these errors were encountered:

stof · 2023-04-15T03:18:11Z

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 · 2023-04-27T14:51:34Z

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 · 2023-05-01T13:50:57Z

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 · 2023-05-01T20:32:27Z

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 · 2023-05-02T07:41:53Z

Also experiencing this 🤔

visualjeff · 2023-05-02T16:37:15Z

Same here. Storybook 7.0.7, Vite and @fontsource.

shilman · 2023-05-03T07:06:29Z

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 · 2023-05-03T11:36:06Z

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 · 2023-05-03T11:38:20Z

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

ndelangen · 2023-05-04T08:43:42Z

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 · 2023-05-04T12:20:24Z

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 · 2023-05-04T13:07:18Z

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

ndelangen · 2023-05-04T14:35:16Z

Here's the config in storybook's codebase:

storybook/code/lib/builder-manager/src/index.ts

Lines 53 to 63 in 6bb9363

    
           loader: { 
        
             '.js': 'jsx', 
        
             '.png': 'dataurl', 
        
             '.gif': 'dataurl', 
        
             '.jpg': 'dataurl', 
        
             '.jpeg': 'dataurl', 
        
             '.svg': 'dataurl', 
        
             '.webp': 'dataurl', 
        
             '.webm': 'dataurl', 
        
             '.woff2': 'dataurl', 
        
           },

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 · 2023-05-09T16:35:32Z

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 · 2023-05-10T10:20:48Z

Here's the config in storybook's codebase:

storybook/code/lib/builder-manager/src/index.ts

Lines 53 to 63 in 6bb9363

loader: {

'.js': 'jsx',

'.png': 'dataurl',

'.gif': 'dataurl',

'.jpg': 'dataurl',

'.jpeg': 'dataurl',

'.svg': 'dataurl',

'.webp': 'dataurl',

'.webm': 'dataurl',

'.woff2': 'dataurl',

},

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 · 2023-05-15T09:18:27Z

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 · 2023-05-16T14:34:10Z

I opened a PR fixing this

shilman · 2023-05-19T17:40:25Z

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 · 2023-05-22T19:20:29Z

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 · 2023-05-23T01:03:31Z

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 · 2023-05-23T02:36:53Z

@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 · 2023-05-23T11:38:56Z

MP3 in the manager?

sure, why not?

shilman · 2023-05-23T16:21:54Z

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 · 2023-05-23T17:07:00Z

¡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

kuhiga added bug needs triage labels Apr 15, 2023

kuhiga closed this as completed Apr 15, 2023

kuhiga reopened this May 1, 2023

shilman added builder-webpack5 needs reproduction and removed needs triage labels May 3, 2023

shilman added builder-manager and removed needs reproduction builder-webpack5 labels May 3, 2023

ndelangen closed this as completed May 4, 2023

ndelangen mentioned this issue May 16, 2023

add legacy font formats #22576

Merged

ndelangen reopened this May 16, 2023

valentinpalkovic closed this as completed in #22576 May 17, 2023

ndelangen mentioned this issue May 23, 2023

UI: Fix .mp3 support for builder-manager #22699

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

kuhiga commented Apr 15, 2023 •

edited

stof commented Apr 15, 2023

sam-higgs commented Apr 27, 2023

pinetree commented May 1, 2023

arnaldoperez commented May 1, 2023

rheaney-r7 commented May 2, 2023

visualjeff commented May 2, 2023

shilman commented May 3, 2023

petter commented May 3, 2023

shilman commented May 3, 2023

ndelangen commented May 4, 2023

arnaldoperez commented May 4, 2023

rheaney-r7 commented May 4, 2023 •

edited

ndelangen commented May 4, 2023

rheaney-r7 commented May 9, 2023

dudif91 commented May 10, 2023

EmielH commented May 15, 2023

ndelangen commented May 16, 2023

shilman commented May 19, 2023

shilman commented May 22, 2023

ggdaltoso commented May 23, 2023

shilman commented May 23, 2023

ndelangen commented May 23, 2023

shilman commented May 23, 2023

shilman commented May 23, 2023

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

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

Comments

kuhiga commented Apr 15, 2023 • edited

Describe the bug

To Reproduce

System

Additional context

stof commented Apr 15, 2023

sam-higgs commented Apr 27, 2023

pinetree commented May 1, 2023

arnaldoperez commented May 1, 2023

rheaney-r7 commented May 2, 2023

visualjeff commented May 2, 2023

shilman commented May 3, 2023

petter commented May 3, 2023

shilman commented May 3, 2023

ndelangen commented May 4, 2023

arnaldoperez commented May 4, 2023

rheaney-r7 commented May 4, 2023 • edited

ndelangen commented May 4, 2023

rheaney-r7 commented May 9, 2023

dudif91 commented May 10, 2023

EmielH commented May 15, 2023

ndelangen commented May 16, 2023

shilman commented May 19, 2023

shilman commented May 22, 2023

ggdaltoso commented May 23, 2023

shilman commented May 23, 2023

ndelangen commented May 23, 2023

shilman commented May 23, 2023

shilman commented May 23, 2023

kuhiga commented Apr 15, 2023 •

edited

rheaney-r7 commented May 4, 2023 •

edited