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:

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.

[robcaldecottvelo]

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

"homepage": "./"

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