Storybook uses Vite for building and webpack for development

[Kapelianovych]

Hello. I have a project which uses Solid JS and Vite. I decided to add Storybook for developing components and isolated testing, but I don't understand why Storybook uses webpack for building components when I run npx start-storybook -p 6006 and Vite for npx build-storybook.

Here is my main.cjs file (I have the type: "module" in my package.json):

const Solid = require('vite-plugin-solid');
const SolidSvg = require('vite-plugin-solid-svg');
const { mergeConfig } = require('vite');

module.exports = {
	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
	addons: [
		'@storybook/addon-links',
		'@storybook/addon-essentials',
		'@storybook/addon-interactions',
	],
	features: {
		storyStoreV7: true,
	},
	core: {
		builder: '@storybook/builder-vite',
	},
	async viteFinal(config) {
		const { default: applicationConfiguration } = await import(
			'../vite.config.js'
		);

		return mergeConfig(config, {
			plugins: [Solid({ hot: false }), SolidSvg()],
			resolve: applicationConfiguration.resolve,
		});
	},
};

Storybook v6.5.16
@storybook/builder-vite v0.4.2

[IanVS]

In storybook 6.5, webpack is used to build the Storybook "manager" UI (the sidebar and panels), even when Vite is used to build your components themselves. This is changed in 7.0, which does not use Webpack at all if you choose a vite framework. (It also automatically uses your vite.config file, so you don't need the viteFinal unless you have special config just for Storybook).

[Kapelianovych]

Thanks for your fast reply!