redwoodjs / redwood

The App Framework for Startups
https://redwoodjs.com
MIT License
17.26k stars 991 forks source link

[Bug?]: Storybook build error when importing css from fontsource #9970

Open ChrisLFieldsII opened 8 months ago

ChrisLFieldsII commented 8 months ago

What's not working?

Adding something like import "@fontsource-variable/inter"; to the storybook.preview.js causes a build error regarding no sourcemaps for resolve-url-loader.

This worked in previous versions of Redwood.

I tried to do some digging into the webpack.common.js but couldn't find a solution.

Screenshot 2024-02-06 at 11 12 23 PM

How do we reproduce the bug?

Clone this repo and run yarn rw storybook.

It should show an error at build time like the one attached above.

What's your environment? (If it applies)

System:
    OS: macOS 14.2.1
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.1 - /private/var/folders/4h/7lryc_8j0dnddhpng25wx3dw0000gn/T/xfs-fe8c89d1/node
    Yarn: 4.0.2 - /private/var/folders/4h/7lryc_8j0dnddhpng25wx3dw0000gn/T/xfs-fe8c89d1/yarn
  Databases:
    SQLite: 3.43.2 - /usr/bin/sqlite3
  Browsers:
    Chrome: 121.0.6167.139
    Safari: 17.2.1
  npmPackages:
    @redwoodjs/cli-storybook: 6.6.4 => 6.6.4 
    @redwoodjs/core: 6.6.4 => 6.6.4

Are you interested in working on this?

dthyresson commented 8 months ago

Thanks @ChrisLFieldsII for bringing this to our attention. I’ll have someone on the team who’s more familiar with Storybook look into this.

zakmandhro commented 7 months ago

We are running into this issue as well when using local fonts in index.css:

@font-face {
  font-family: 'Sen-Regular';
  src: local('Sen-Regular'), url(/fonts/Sen/Sen-Regular.ttf) format('truetype');
}
Philzen commented 2 months ago

Also bumped into this while upgrading from RW 4.5.0 to 6.6.4. Possible root cause: https://github.com/bholloway/resolve-url-loader/issues/212

yarn redwood storybook-vite works fine (after updating to RW 7.7.0 and then migrating Storybook to Vite), however yarn redwood storybook may only be fixable via tsconfig enabling generation of source-maps for css files for any folks wanting to stick to webpack.