Storybook: font file URL wrong for imported font package

[robphoenix]

Describe the bug
I'm using an installed typeface package, similar to typeface-roboto in my create-react-app app.
I'm importing it for use in storybook in .storybook/preview.js, import 'typeface-roboto'. This works fine when running storybook with start-storybook. However when I build it, storybook is trying to load the font from the wrong location. The font is located at static/media/[name].[hash:8].[ext] whereas storybook is looking for it at static/media/static/css/[name].[hash:8].[ext], so is returning a 404.

I'm not sure if this is a problem with storybook, webpack or create-react-app.

The only custom webpack config I have is an alias, and I've tried various custom webpack configs after browsing other similar issues here. the closest I've come is building the files in the correct location, but the hash is different to what storybook is looking for, and I don't know how I can change the expected URL, or what's creating it in the first place.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://github.com/robphoenix/storybook-issue
2. Clone repo
3. Install dependencies; yarn
4. Run app, yarn start, and see the heading using the Roboto typeface
5. Run storybook, yarn storybook and see the Heading story using the Roboto typeface
6. Build storybook, yarn build-storybook, and serve, yarn serve-storybook and see the Heading story not using the Roboto typeface
7. open the console in dev tools and see the error: Failed to load resource: the server responded with a status of 404 (Not Found), and hover over the font filename to see the URL, it should be localhost:5000/static/css/static/media
8. in the terminal see that the fonts are in storybook_build/static/media

Expected behavior
Fonts to load.

System:
Please paste the results of npx -p @storybook/cli@next sb info here.

System:
    OS: macOS 10.15.2
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 13.5.0 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 79.0.3945.117
    Firefox: 71.0
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-actions: ^5.3.7 => 5.3.7
    @storybook/addon-links: ^5.3.7 => 5.3.7
    @storybook/addons: ^5.3.7 => 5.3.7
    @storybook/preset-create-react-app: ^1.5.2 => 1.5.2
    @storybook/react: ^5.3.7 => 5.3.7

Additional context
Add any other context about the problem here.

[zero298]

I'm having the same issue in v5.3.8. Everything runs fine with start-storybook, but running the static directory build with build-storybook does not.

I have a preview.js that pulls in my font.css relatively.

Basically:

import "../src/assets/fonts/fonts.css";

The fonts aren't anything special, something along the lines of:

@font-face {
  font-family: "Ionicons";
  src: url("~react-native-vector-icons/Fonts/Ionicons.ttf");
}

@font-face {
  font-family: "MyCoolFont";
  src: url("./my_cool_font/MyCoolFont.ttf");
}

Then the produced CSS that _should_ be pulling in the fonts has these kinds of entries:

@font-face {
  font-family: "Ionicons";
  src: url(static/media/Ionicons.b2e0fc82.ttf);
}

@font-face {
  font-family: "MyCoolFont";
  src: url(static/media/MyCoolFont.de18c447.ttf);
}

And the requests that get made when I serve with npx http-server storybook-static/ try to do this:

http://localhost:8080/static/css/static/media/MyCoolFont.de18c447.ttf

If I manually fix the relative path in the produced CSS it works:

@font-face {
  font-family: "MyCoolFont";
  src: url(../../static/media/MyCoolFont.de18c447.ttf);
}

But I don't think that's what we should have to do.

[zero298]

Whenever I compare this to what react-scripts build does, the only difference in output is that build-storybook will omit a leading / in the url().

So CRA produces the following (unminified for readability):

@font-face {
    font-family: Ionicons;
    src: url(/static/media/Ionicons.b2e0fc82.ttf)
}

and Storybook build produces:

@font-face {
  font-family: "Ionicons";
  src: url(static/media/Ionicons.b2e0fc82.ttf);
}

[lukedigby]

I'm getting the same issue loading fonts locally, as in the example shown by @zero298 :

@font-face {
  font-family: "MyCoolFont";
  src: url("./my_cool_font/MyCoolFont.ttf");
}

[robcaldecottvelo]

Same issue here on 5.3.9 with a custom font located elsewhere in our yarn monorepo.
Does anyone have a workaround for this? Maybe via a custom webpack config?

[robcaldecottvelo]

I found a dirty workaround: add the following to your package.json:

"homepage": "./"

[robphoenix]

@robcaldecottvelo 🙏 awesome thanks, that works.

Even though you say this is a dirty workaround it fixes my issue so I'm going to close this.

[robcaldecottvelo]

@robphoenix Glad to help but for projects where homepage is required (because it points at a genuine URL) this font issue might still be a problem...

[zero298]

@robphoenix
This is still an issue. Please leave this open until it works without the workaround. I don't think I'm going to be able to use this if I deploy it to a revere proxied site. I would think I'd need to programmatically adjust the homepage in the CI. I'd rather not create a duplicate ticket.

[robphoenix]

Reopening as requested 👍

[salomvary]

Teh issue seems to be impacting other things referred to from CSS files using url(). I published a small repo that allows reproducing the problem with background-image: url() here: https://github.com/salomvary/storybook-bug

Steps to reproduce:

• Clone the repo above
• npm install
• npm run build-storybook
• Serve from a webserver, eg. npx http-server storybook-static
• Load storybook in a browser and watch the developer tools network tab for 404 errors

The dirty homepage workaround worked for me.

[salomvary]

Interestingly, setting "homepage": "./" broke my create-react-app build while fixing Storybook.

[dsarfati]

@salomvary We ended up doing what @zero298 suggested and setting "homepage": "./" with a build script when we build storybook and leave it to the normal value when creating the CRA build.

# Required due to a bug in storybook https://github.com/storybookjs/storybook/issues/9564
sed -i -e 's|"homepage": "https://www.salad.io/"|"homepage": "./"|' package.json

yarn run build-storybook || { echo 'build failed' ; exit 1; }

[functionalDev]

The problems seems to be related to the file-loader.
I found a workaround by adjusting the config for the file-loader in main.js

module.exports = {
  stories: ['../src/stories/*.stories.js'],
  addons: [
    '@storybook/preset-create-react-app',
  ],
  webpackFinal:  async (config) => {
    const getFileLoader = (config) => {
      const { oneOf = [] } = config.module.rules.find(({ oneOf }) => oneOf);
      return oneOf.find(({loader}) => /file-loader/.test(loader));
    };

    const mutateLoaderToMakePathAbsolute = (loader) => {
        if(loader && loader.options && loader.options.name) {
          loader.options.name = '/' + loader.options.name;
        }
    };

    const fileLoader = getFileLoader(config);
    mutateLoaderToMakePathAbsolute(fileLoader);
    return config;
  },
};

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[l0c0luke]

this was working for me in 5.2, now broke in 5.3 ... do we know when this started? will it be different in 6.0?

[shilman]

@l0c0luke No idea. Would love help tracking this down!

[mrmckeb]

This should be fixed in the latest release of the preset for CRA. Can anyone confirm?

Again, this won't be fixed in core - you'll need to use and update the preset.

[robphoenix]

@mrmckeb can confirm my original issue is fixed after updating my dependencies

 "@storybook/preset-create-react-app": "^2.1.1",
 "@storybook/react": "^5.3.18",

many thanks 🙏 🌈

I'm going to close this as anything else should probably go in a new issue.

[zero298]

This is solved for me as well after updating. Thanks 👍