Storybook (@storybook/web-components-vite) with Vite and vite-plugin-lwc

[lukethacoder]

Summary

I am attempting to run the latest version of Storybook (v9) with the @storybook/web-components-vite framework and the vite-plugin-lwc.

Running the dev server works fine, but running the storybook build command causes the following issue:

pnpm build

> [email protected] build /home/projects/stackblitz-starters-jzmxvmya
> storybook build

storybook v9.1.3

info => Cleaning outputDir: storybook-static
info => Loading presets
info => Building manager..
info => Building preview..
No story files found for the specified pattern: force-app/**/__docs__/**/*.mdx
vite v7.1.3 building for production...
✓ 9 modules transformed.
✗ Build failed in 251ms
=> Failed to build the preview
iframe.html?html-proxy&inline-css&index=0.css (2:17): Expected ';', '}' or <eof> (Note that you need plugins to import files that are not JavaScript)
file: ./iframe.html?html-proxy&inline-css&index=0.css:2:17

1: 
2:       @font-face {
                    ^
3:         font-family: 'Nunito Sans';
4:         font-style: normal;

    at Module.getRollupError (file://./node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:568:41)
    at ParseError.initialise (file://./node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:14458:41)
    at convertNode (file://./node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:16338:10)
    at convertProgram (file://./node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:15578:12)
    at Module.setSource (file://./node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:17333:24)
    at async ModuleLoader.addModuleSource (file://./node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:21346:13)
? Would you like to help improve Storybook by sending anonymous

There is a bit more context and info on the related discussion on the vite-plugin-lwc repo cardoso/vite-plugin-lwc#95

Also related vitejs/vite#20708

Additional information

No response

Create a reproduction

https://github.com/lukethacoder/lwc-storybook-vite

[dosubot[bot]]

Hi @lukethacoder! I'm Dosu and I’m helping the storybook team.

The build failure happens because the production build (using Rollup under Vite) tries to parse CSS in iframe.html—specifically the @font-face rules—without the necessary plugins to handle non-JS assets like CSS and fonts. The dev server works because Vite's dev mode uses a different asset pipeline that doesn't hit this limitation. Disabling vite-plugin-lwc avoids the error but breaks Lightning Web Components loading, confirming it's a plugin compatibility/configuration issue source.

To fix this, you need to extend your Vite config using the viteFinal hook in .storybook/main.js or main.ts to add the required asset handling plugins (such as CSS loaders or static asset plugins). Storybook expects users to handle custom asset types this way, especially when using custom plugins like vite-plugin-lwc source. There’s no built-in workaround—successful builds rely on configuring Vite to process all asset types your stories use.

Check the vite-plugin-lwc discussion for more context and possible plugin tweaks. If you need an example, the Storybook docs show how to use viteFinal to add plugins for asset support source:

// .storybook/main.js
module.exports = {
  // ...other config
  async viteFinal(config, { configType }) {
    // Add plugins or tweak config here
    // Example: config.plugins.push(require('vite-plugin-static-copy')({ ... }))
    return config;
  },
};

Start by adding or adjusting asset plugins in viteFinal until the build succeeds. If you run into specific plugin errors, check the plugin docs for Vite compatibility tips.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[lukethacoder]

Closing for now as this looks to be caused by issues with the vite-plugin-lwc package. More info/discussions: cardoso/vite-plugin-lwc#95