Open valentinpalkovic opened 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:
vite-config.ts
includes 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;
}
pluginConfig
handle 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;
}
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.
/code/builders/builder-vite/src/index.ts /code/builders/builder-vite/src/vite-config.ts /code/builders/builder-vite /code/builders
Upgraded from 8.0.4
to 8.2.4
today and am now running into this issue.
Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files
Sourcemap for "/virtual:/@storybook/builder-vite/vite-app.js" points to missing source files
Sourcemap for "/Users/kerry/dev/some-design-worktree/components/projects/components/node_modules/.cache/storybook/c698b8ade20774e74879ccaec4f97d28db2fdf6f7fb93649c7d24018c42360de/sb-vite/deps/chunk-4UF4PDC3.js" points to missing source files
...and so on
@Loic57 Can you create another GitHub issue related to your HMR issue in Stencil?
@kerryj89 I don't think your issue is related to the issue of missing source files. Can you please create another GitHub issue?
I was facing the same issue today after upgrading to 8.2.4 Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files Sourcemap for "/virtual:/@storybook/builder-vite/vite-app.js" points to missing source files
So Ive downgraded back to 7.6.20
@David05500 Except of having a nasty warning in the terminal Storybook should still function. I wouldnโt recommend to downgrade just because of it. You could upgrade to 8.1.11. This version is not containing the issue.
I also got the same error.
Reproduction steps:
yarn create vue
yarn dlx storybook init
Reproduction repo: https://github.com/issue-reproduction/vue-vite-storybook-issue/tree/yarn/nodeLinker-node-modules
"vue": "^3.4.31",
"storybook": "^8.2.4",
"vite": "^5.3.4",
"@vitejs/plugin-vue": "^5.0.5"
Full log:
yarn storybook dev -p 6006
```log D:\Code\issue\vue-vite-storybook-issue>yarn storybook dev -p 6006 storybook v8.2.4 info => Starting manager.. info => Starting preview.. โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ โ โ โ Storybook 8.2.4 for vue3-vite started โ โ 411 ms for manager and 672 ms for preview โ โ โ โ Local: http://localhost:6006/ โ โ On your network: http://192.168.1.20:6006/ โ โ โ โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files Sourcemap for "/virtual:/@storybook/builder-vite/vite-app.js" points to missing source files ```
yarn storybook build
```log D:\Code\issue\vue-vite-storybook-issue>yarn storybook build storybook v8.2.4 info => Cleaning outputDir: storybook-static info => Loading presets info => Building manager.. info => Manager built (221 ms) info => Building preview.. vite v5.3.4 building for production... node_modules/telejson/dist/index.mjs (1413:15): Use of eval in "node_modules/telejson/dist/index.mjs" is strongly discouraged as it poses security risks and may cause issues with minification. node_modules/telejson/dist/index.mjs (1416:18): Use of eval in "node_modules/telejson/dist/index.mjs" is strongly discouraged as it poses security risks and may cause issues with minification. node_modules/@storybook/vue3/dist/entry-preview-docs.mjs (9:1345): Use of eval in "node_modules/@storybook/vue3/dist/entry-preview-docs.mjs" is strongly discouraged as it poses security risks and may cause issues with minification. โ 497 modules transformed. storybook-static/assets/context-C0qIqeS4.png 6.12 kB storybook-static/assets/styling-Bk6zjRzU.png 7.24 kB storybook-static/iframe.html 16.36 kB โ gzip: 4.44 kB storybook-static/assets/docs---vsFbMi.png 27.88 kB storybook-static/assets/share-DGA-UcQf.png 40.77 kB storybook-static/assets/accessibility-W_h2acOZ.png 42.34 kB storybook-static/assets/figma-plugin-CH2hELiO.png 44.25 kB storybook-static/assets/theming-D6WJLNoW.png 44.37 kB storybook-static/assets/testing-cbzR9l9r.png 49.31 kB storybook-static/assets/addon-library-BWUCAmyN.png 467.37 kB storybook-static/assets/Header-BjLH3naM.css 0.51 kB โ gzip: 0.30 kB storybook-static/assets/Button-BfyGbg8N.css 0.52 kB โ gzip: 0.29 kB storybook-static/assets/Page-B9ntr4df.css 0.93 kB โ gzip: 0.40 kB storybook-static/assets/preview-BnWGZYux.js 0.07 kB โ gzip: 0.08 kB storybook-static/assets/preview-CIRcjyVj.js 0.11 kB โ gzip: 0.11 kB storybook-static/assets/preview-DE7p7AzZ.js 0.16 kB โ gzip: 0.16 kB storybook-static/assets/index-BoSSb2R6.js 0.26 kB โ gzip: 0.18 kB storybook-static/assets/index-CjvHkRZd.js 0.39 kB โ gzip: 0.26 kB storybook-static/assets/preview-BJPLiuSt.js 0.64 kB โ gzip: 0.45 kB storybook-static/assets/preview-BpcF_O6y.js 0.71 kB โ gzip: 0.50 kB storybook-static/assets/index-DrFu-skq.js 0.77 kB โ gzip: 0.47 kB storybook-static/assets/preview-2enRuHIs.js 0.77 kB โ gzip: 0.50 kB storybook-static/assets/Header.stories-BGlEp0Gs.js 1.02 kB โ gzip: 0.52 kB storybook-static/assets/Button.stories-C57JHs79.js 1.56 kB โ gzip: 0.58 kB storybook-static/assets/Header-DHOsF23d.js 1.60 kB โ gzip: 0.89 kB storybook-static/assets/index-Dym7vi56.js 1.68 kB โ gzip: 0.85 kB storybook-static/assets/DocsRenderer-PKQXORMH-DOdF88mr.js 1.78 kB โ gzip: 0.88 kB storybook-static/assets/entry-preview-DM95eRMn.js 2.33 kB โ gzip: 1.25 kB storybook-static/assets/index-D-8MO0q_.js 2.58 kB โ gzip: 1.26 kB storybook-static/assets/preview-9hFJSo5S.js 3.20 kB โ gzip: 1.38 kB storybook-static/assets/preview-Ct5NkTJf.js 3.50 kB โ gzip: 1.69 kB storybook-static/assets/Page.stories-Dks3FqcD.js 3.54 kB โ gzip: 1.68 kB storybook-static/assets/iframe-Dly9Xvin.js 4.54 kB โ gzip: 1.82 kB storybook-static/assets/preview-DB9FwMii.js 7.62 kB โ gzip: 1.56 kB storybook-static/assets/preview-Cdum89jS.js 8.12 kB โ gzip: 3.10 kB storybook-static/assets/entry-preview-docs-xQ1Zq6ry.js 14.89 kB โ gzip: 5.81 kB storybook-static/assets/Configure-CYEWVRpQ.js 26.65 kB โ gzip: 11.53 kB storybook-static/assets/Color-KGDBMAHA-NqxdIwus.js 30.80 kB โ gzip: 11.70 kB storybook-static/assets/index-DZLKizrv.js 61.57 kB โ gzip: 21.47 kB storybook-static/assets/index-TAVom-gR.js 80.58 kB โ gzip: 23.98 kB storybook-static/assets/vue.esm-bundler-CMiB1aF2.js 156.87 kB โ gzip: 58.77 kB storybook-static/assets/Button-BQ2yOadR.js 642.77 kB โ gzip: 148.44 kB storybook-static/assets/index-C8IehePe.js 1,023.04 kB โ gzip: 325.85 kB (!) Some chunks are larger than 500 kB after minification. Consider: - Using dynamic import() to code-split the application - Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks - Adjust chunk size limit for this warning via build.chunkSizeWarningLimit. โ built in 6.28s info => Preview built (6.91 s) info => Output directory: D:\Code\issue\vue-vite-storybook-issue\storybook-static ```
With Yarn 4 (nodeLinker: pnpm)
, I got another error #28620
I have similar issue as @phamhongphuc on Yarn 4 PnP and Storybook Vite 8.2.5. It seems deleting .yarn.lock
file, deleting the .cache
folder, and reinstalling with yarn
resolved the issue. Probably since the lock file still had older vite versions which were missing patches.
For the virtual modules, there is forward slash (/
) before :virtual
, but the filter regex in vite doesn't have a pattern to match.
// Virtual modules should be prefixed with a null byte to avoid a
// false positive "missing source" warning. We also check for certain
// prefixes used for special handling in esbuildDepPlugin.
const virtualSourceRE = /^(?:dep:|browser-external:|virtual:)|\0/
Is there a reason why source maps are generated for @storybook
modules? I believe we can turn off loading source maps, but doesn't seem to be preventable when modules already have source maps.
@valentinpalkovic Do you know what's causing this?
Not yet! I can investigate it next week as part of my empathy week!
I encountered the same logs. Meanwhile I guess downgrading is the fix. Note: Handle storybooks/addons versions for compatibility, I made them match 8.1.11 storybook version.
"storybook": "8.1.11",
"@storybook/addon-essentials": "8.1.11"
"@storybook/addon-interactions": "8.1.11",
"@storybook/addon-links": "8.1.11",
"@storybook/blocks": "8.1.11",
"@storybook/builder-vite": "8.1.11",
"@storybook/manager-api": "8.1.11",
"@storybook/react": "8.1.11",
"@storybook/react-vite": "8.1.11",
"@storybook/test": "8.1.11",
"@storybook/theming": "8.1.11"
Except of having a nasty warning in the terminal Storybook should still function.
I don't see any functional issues even though the warning appears in the terminal.
Has anyone encountered any actual failures anywhere?
My deps now:
"@storybook/addon-a11y": "^8.2.5",
"@storybook/addon-docs": "^8.2.5",
"@storybook/addon-essentials": "^8.2.5",
"@storybook/addon-interactions": "^8.2.5",
"@storybook/addon-links": "^8.2.5",
"@storybook/react": "^8.2.5",
"@storybook/react-vite": "^8.2.5",
"@storybook/test": "^8.2.5",
"@storybook/test-runner": "^0.19.1",
"storybook": "^8.2.5",
Any update on this?
I use storybook 8.2.7 with a new react (with vite) project and it also appears to me:
Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files
Sourcemap for "/virtual:/@storybook/builder-vite/vite-app.js" points to missing source files
I'm getting the same errors, with Storybook 8.2.7
(+ vite):
Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files
Sourcemap for "/virtual:/@storybook/builder-vite/vite-app.js" points to missing source files
Sourcemap for "project-name/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-JT2S5XWW.js" points to missing source files
Sourcemap for "project-name/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-G4IBRLZB.js" points to missing source files
Sourcemap for "project-name/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-Q3AQ5QX7.js" points to missing source files
Sourcemap for "project-name/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-H34TB425.js" points to missing source files
Sourcemap for "project-name/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-JO3NLJMA.js" points to missing source files
Sourcemap for "project-name/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-IMALHOV3.js" points to missing source files
Sourcemap for "project-name/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-G2BJXQAJ.js" points to missing source files
Sourcemap for "project-name/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-LPRKOUG3.js" points to missing source files
Same for me, while upgrading to 8.2.7
(react + vite):
Please advise.
Same for me, while upgrading to
8.2.7
(react + vite):![]()
Please advise.
This looks more like a different bug.
Same for me, while upgrading to
8.2.7
(react + vite):![]()
Please advise.
This looks more like a different bug.
This is same, hence I reached out -
Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files
I also am experiencing:
Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files
Sourcemap for "/virtual:/@storybook/builder-vite/vite-app.js" points to missing source files
In addition, HMR is not working. I am on Vite 5.3.5, storybook 8.2.7 (in react).
I can confirm this bug in a Vue + Vite + Storybook project. I just upgraded to Storybook 8.2.7 from Storybook 7.
Does anyone else here have problem with autodocs not shoing up the table for props, emits and so on?
I'm starting to think that this warning in the console has something to do with autodocs pages bascially being empty. Only the args that I define for a story are shown as well as their controls. But If I don't define any args explicitly, the autodocs page is basically empty and thus useless.
Does anyone else here have problem with autodocs not shoing up the table for props, emits and so on?
I'm starting to think that this warning in the console has something to do with autodocs pages bascially being empty. Only the args that I define for a story are shown as well as their controls. But If I don't define any args explicitly, the autodocs page is basically empty and thus uselesse.
@Walnussbaer For me, it's not related to this issue.
Try with the version 8.1 of storybook, if you have also the autodocs problem, looks at the new vue docgen option in >= 8.0 : https://storybook.js.org/docs/get-started/frameworks/vue3-vite?renderer=vue#using-vue-component-meta
options: {
+ docgen: 'vue-component-meta',
},
Does anyone else here have problem with autodocs not shoing up the table for props, emits and so on? I'm starting to think that this warning in the console has something to do with autodocs pages bascially being empty. Only the args that I define for a story are shown as well as their controls. But If I don't define any args explicitly, the autodocs page is basically empty and thus uselesse.
@Walnussbaer For me, it's not related to this issue.
Try with the version 8.1 of storybook, if you have also the autodocs problem, looks at the new vue docgen option in >= 8.0 : https://storybook.js.org/docs/get-started/frameworks/vue3-vite?renderer=vue#using-vue-component-meta
options: { + docgen: 'vue-component-meta', },
I downgraded to 8.1.11 but still no meaningful autodocs page (I was already using vue-component-meta
). I can see the component but the controls are still missing. I will open my own bug ticket, because I don't want to conquer this one here. Thanks anyway for your suggestion to try 8.1 :)
BTW: I created a sandbox project with the Storybook CLI (npx storybook@8.2.7 sandbox vue
).
When I start the storybook instance in this new and clean project, even then I get the following errors:
Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files
Sourcemap for "/virtual:/@storybook/builder-vite/vite-app.js" points to missing source files
Still an issue, v8.2.9
| Storybook 8.2.9 for preact-vite started
...
| Sourcemap for "/virtual:/@storybook/builder-vite/vite-app.js" points to missing source files
| Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files
| Sourcemap for "project-name/node_modules/.cache/storybook/cea5d5a57c0bd9ff1b61587365bbdefc908c69a21e9c90584eadf79edbb4a529/sb-vite/deps/chunk-NKYJLOIU.js" points to missing source files
| Sourcemap for "project-name/node_modules/.cache/storybook/cea5d5a57c0bd9ff1b61587365bbdefc908c69a21e9c90584eadf79edbb4a529/sb-vite/deps/chunk-LUT37SML.js" points to missing source files
| Sourcemap for "project-name/node_modules/.cache/storybook/cea5d5a57c0bd9ff1b61587365bbdefc908c69a21e9c90584eadf79edbb4a529/sb-vite/deps/chunk-YGRMY5AF.js" points to missing source files
| Sourcemap for "project-name/node_modules/.cache/storybook/cea5d5a57c0bd9ff1b61587365bbdefc908c69a21e9c90584eadf79edbb4a529/sb-vite/deps/chunk-JNHMQTSP.js" points to missing source files
| Sourcemap for "project-name/node_modules/.cache/storybook/cea5d5a57c0bd9ff1b61587365bbdefc908c69a21e9c90584eadf79edbb4a529/sb-vite/deps/chunk-KY3SZA6T.js" points to missing source files
I can confirm that issue still persist with storybook v8.2.9 and Vite + react.
I can confirm that issue still persist with storybook v8.2.9 and Vite + react.
Yes, the fix of the issue was reverted, and it's still in progress for the next 8.3 : https://github.com/storybookjs/storybook/pull/28867
I'm experiencing the same issue with Storybook 8.2.9, too.
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