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

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

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 24 (12 by maintainers)

Most upvoted comments

I opened a PR fixing this

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.

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

MP3 in the manager?

sure, why not?

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

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

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)