Failing to run in Lerna/Yarn Workspaces powered app with custom fonts in CSS

[seniorquico]

I'm having trouble loading custom fonts in CSS in a new app created using CRA.

I added the "mdi" package (for the Material Design Icons font) and added "@import '~mdi/css/materialdesignicons.css';" in the "index.css" file. When I run/build using CRA, everything works fine. However, when I run with Storybook, I get the following error (repeated multiple times for each of the font files... ttf, woff, woff2, svg):

ERROR in ...node_modules/mdi/fonts/materialdesignicons-webfont.ttf?v=2.0.46
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ...node_modules/@storybook/react/node_modules/css-loader?{"importLoaders":1}!...node_modules/@storybook/react/node_modules/postcss-loader/lib?{"ident":"postcss","plugins":[null,null]}!...node_modules/mdi/css/materialdesignicons.css 6:512-572
 @ ...node_modules/@storybook/react/node_modules/css-loader?{"importLoaders":1}!...node_modules/@storybook/react/node_modules/postcss-loader/lib?{"ident":"postcss"}!./src/index.css
 @ ./src/index.css
 @ ./.storybook/config.js
 @ multi ...node_modules/@storybook/react/dist/server/config/polyfills.js ...node_modules/@storybook/react/dist/server/config/globals.js ...node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js

I don't have any custom webpack configs, I'm just using the defaults from CRA. Is anyone else having problems loading custom fonts? Could this be something unique to Material Design Icons?

[danielduan]

We do use file-loader for those binary font files but I don't think the include directory includes node_modules.

Do you have your repo online somewhere?

[seniorquico]

No. ☹️

But, I should be able to create a repro and post it to GitHub. I'll try to get to that in the next day or two.

[seniorquico]

I'm bummed it took this long... but I finally got the time to dig into this and post a repo that reproduces the problem.

https://github.com/seniorquico/storybook-2193

This appears to be an issue with using Storybook.js in a project using Lerna and/or Yarn Workspaces. The repo includes a create-react-app project that works just fine standalone. The same project copied into a Lerna/Yarn Workspaces powered project fails with the original error message I reported.

I tried a quick search for existing issues, but came up dry. Did I miss some configuration? Has anyone else run into this or similar?

[stale]

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 60 days. Thanks!

[Hypnosphi]

Looks like updating to 3.4.0-alpha.6 fixes the issue (probably because of removing includes in #2796)