greptile-apps[bot]
commented
1 month ago Disclaimer This information might be inaccurate, due to it being generated automatically
To resolve the issue with missing source files in sourcemaps for /virtual:/@storybook/builder-vite/setup-addons.js and /virtual:/@storybook/builder-vite/vite-app.js, follow these steps:
- Check Vite Configuration: Ensure that the Vite configuration in
vite-config.tsincludes proper handling for source maps.
// vite-config.ts
export async function commonConfig(options: Options, _type: PluginConfigType): Promise<ViteInlineConfig> {
const configEnv = _type === 'development' ? configEnvServe : configEnvBuild;
const { loadConfigFromFile, mergeConfig } = await import('vite');
const { viteConfigPath } = await getBuilderOptions<BuilderOptions>(options);
const projectRoot = path.resolve(options.configDir, '..');
const { config: { build: buildProperty = undefined, ...userConfig } = {} } =
(await loadConfigFromFile(configEnv, viteConfigPath, projectRoot)) ?? {};
const sbConfig: InlineConfig = {
configFile: false,
cacheDir: resolvePathInStorybookCache('sb-vite', options.cacheKey),
root: projectRoot,
base: './',
plugins: await pluginConfig(options),
resolve: {
conditions: ['storybook', 'stories', 'test', 'browser', 'import', 'module', 'default'],
preserveSymlinks: isPreservingSymlinks(),
alias: {
assert: require.resolve('browser-assert'),
},
},
envPrefix: userConfig.envPrefix ? ['STORYBOOK_'] : ['VITE_', 'STORYBOOK_'],
build: {
target: buildProperty?.target,
sourcemap: true, // Ensure sourcemap is enabled
},
};
const config: ViteConfig = mergeConfig(userConfig, sbConfig);
return config;
}- Verify Plugin Setup: Ensure that the plugins used in
pluginConfighandle source maps correctly.
// vite-config.ts
export async function pluginConfig(options: Options) {
const frameworkName = await getFrameworkName(options);
const build = await options.presets.apply('build');
const externals: Record<string, string> = globalsNameReferenceMap;
if (build?.test?.disableBlocks) {
externals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__';
}
const plugins = [
codeGeneratorPlugin(options),
await csfPlugin(options),
await injectExportOrderPlugin(),
await stripStoryHMRBoundary(),
{
name: 'storybook:allow-storybook-dir',
enforce: 'post',
config(config) {
if (config?.server?.fs?.allow) {
config.server.fs.allow.push('.storybook');
}
},
},
await externalGlobalsPlugin(externals),
pluginWebpackStats({ workingDir: process.cwd() }),
] as PluginOption[];
if (frameworkName === '@storybook/glimmerx-vite') {
const plugin = require('vite-plugin-glimmerx/index.cjs');
plugins.push(plugin.default());
}
return plugins;
}- Update
index.ts: Ensure that the Vite server is correctly configured to handle source maps.
// index.ts
export const start: ViteBuilder['start'] = async ({ startTime, options, router, server: devServer }) => {
server = await createViteServer(options as Options, devServer);
const previewResolvedDir = join(corePath, 'dist/preview');
const previewDirOrigin = previewResolvedDir;
router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
router.use(iframeMiddleware(options as Options, server));
router.use(server.middlewares);
return {
bail,
stats: {
toJson: () => {
throw new NoStatsForViteDevError();
},
},
totalTime: process.hrtime(startTime),
};
};These changes should ensure that the source maps are correctly generated and point to the correct source files.
References
/code/builders/builder-vite/src/index.ts /code/builders/builder-vite/src/vite-config.ts /code/builders/builder-vite /code/builders
kerryj89
valentinpalkovic
David05500
phamhongphuc
psychobolt
shilman
Labastidaa
jkananen
omer-priel
7michele7
sachinlala
noelparisi
Walnussbaer
messenjer
Bielousov
kirtimaan-askin
doppelmutzi
Describe the bug
When starting or building Storybook in a Vite project, the following lines are logged to the terminal:
In Vite 4 projects, even more files might be affected.
Reproduction steps