unable to preload CSS, Webpack to Vite, storybook-static, chromatic | Storybook | Page 1

fervent relic Apr 24, 2023, 1:28 PM

#

Hey all, the last hurdle before we can move everything from webpack to vite is here and I have been going in circles trying to solve it. Everything works great in our project however, chromatic fails on CI and i've tracked down the error to something happening with build-storybook.

process so far

updated storybook 6 => 7
a. updated webpack5 to vite
run in dev, works like a charm
ran chromatic locally (failure)
checked storybook static running locally using http-server (as per docs) same error

right now I'm getting a build error in preview.js as its not finding the right chunk.

here's the main.js

  "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  "addons": [{
    name: '@storybook/preset-scss',
    options: {
      cssLoaderOptions: {
        modules: true
      }
    }
  }, 
  "@storybook/addon-links", 
  "@storybook/addon-essentials", 
  "@storybook/addon-a11y", 
  "storybook-addon-designs"
],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: true
  }
};

If anyone can point me in the right direction that would be fantastic. Thank you 🙂

rich mortar Apr 24, 2023, 2:31 PM

#

Have you tried using the staticDirs property? https://storybook.js.org/docs/react/configure/images-and-assets#serving-static-files-via-storybook-configuration

And in your preview-head.html I recommend adding a link tag to actually reference it relative to the build output path

https://github.com/usrrname/loading-custom-fonts/blob/main/.storybook/preview-head.html#L1

fervent relic Apr 24, 2023, 2:59 PM

#

preview-head was a stop gap, originally I had everything in prview.js

#

also the main culprits are bootstrap 3.3.7 and fontawesome, both added locally.

#

the reasoning behind this is to preserve the usage of css classnames as opposed to using modules. Something I would like to change but would require a lot of refactoring

fervent relic Apr 24, 2023, 4:56 PM

#

no joy on the staticDirs fixing the issue, it seems that my entire project on static build is borked. As far as I can tell, its not working because the project is a library that requires adding .module.* to all css and scss files. Whiel this works for building the project to the main app, its not working on chromatic. Unless there is something that I am missing, I'm going to have to keep webpack for dev and QA builds.

#

oh and also keep it on storybook 6

rich mortar Apr 26, 2023, 11:51 PM

#

So, I'm not overly familiar with vite settings for css but didn't find too many. I do know that it does chunking though.

Previously I would have suggested configuring webpack for loading css modules...

Working with multiple DS imports is hell esp if there's namespace conflicts.

#

I can't tell what your whole setup is like but sounds like you may need to have an added scss / css modules preprocess

#unable to preload CSS, Webpack to Vite, storybook-static, chromatic