storybook: font file URL wrong for imported font package

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:

Go to https://github.com/robphoenix/storybook-issue
Clone repo
Install dependencies; yarn
Run app, yarn start, and see the heading using the Roboto typeface
Run storybook, yarn storybook and see the Heading story using the Roboto typeface
Build storybook, yarn build-storybook, and serve, yarn serve-storybook and see the Heading story not using the Roboto typeface
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
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.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 5
Comments: 19 (5 by maintainers)

Most upvoted comments

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

"homepage": "./"

robcaldecottvelo on Jan 30, 2020

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

robphoenix on Apr 16, 2020

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.

mrmckeb on Apr 16, 2020

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 on Feb 20, 2020

Reopening as requested 👍

robphoenix on Jan 30, 2020

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 on Jan 27, 2020