Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: /virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files #28567

Closed
valentinpalkovic opened this issue Jul 12, 2024 · 31 comments · Fixed by #28863 or #28984

Comments

@valentinpalkovic
Copy link
Contributor

valentinpalkovic commented Jul 12, 2024

Describe the bug

When starting or building Storybook in a Vite project, the following lines are logged to the terminal:

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 Vite 4 projects, even more files might be affected.

Reproduction steps

  1. Initialize Storybook in a Vite Project
  2. Start Storybook
Copy link
Contributor

greptile-apps bot commented Jul 12, 2024

** 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:

  1. Check Vite Configuration: Ensure that the Vite configuration in 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;
}
  1. Verify Plugin Setup: Ensure that the plugins used in 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;
}
  1. 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

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings

@kerryj89
Copy link

kerryj89 commented Jul 16, 2024

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

@valentinpalkovic believes the docs error I'm facing inside here has no relation to missing source files, so de-emphasizing it here I am guessing this is what's causing my `parameters.docs.source.transform`'s `code` parameter to be undefined and basically error out with the following in any of my component's docs page:

capture-2024-07-15-xxQUTgge

@valentinpalkovic
Copy link
Contributor Author

@Loic57 Can you create another GitHub issue related to your HMR issue in Stencil?

@valentinpalkovic
Copy link
Contributor Author

@kerryj89 I don't think your issue is related to the issue of missing source files. Can you please create another GitHub issue?

@David05500
Copy link

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

@valentinpalkovic
Copy link
Contributor Author

@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.

@phamhongphuc
Copy link

phamhongphuc commented Jul 16, 2024

I also got the same error.

Reproduction steps:

    1. yarn create vue
    1. 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

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

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

@psychobolt
Copy link

psychobolt commented Jul 20, 2024

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.

@shilman
Copy link
Member

shilman commented Jul 21, 2024

@valentinpalkovic Do you know what's causing this?

@valentinpalkovic
Copy link
Contributor Author

Not yet! I can investigate it next week as part of my empathy week!

@Labastidaa
Copy link

Labastidaa commented Jul 22, 2024

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"
    
    

@jkananen
Copy link

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",

@omer-priel
Copy link

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

@7michele7
Copy link

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

@sachinlala
Copy link

Same for me, while upgrading to 8.2.7 (react + vite):

image

Please advise.

@phamhongphuc
Copy link

Same for me, while upgrading to 8.2.7 (react + vite):

image Please advise.

This looks more like a different bug.

@sachinlala
Copy link

Same for me, while upgrading to 8.2.7 (react + vite):
image
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

@noelparisi
Copy link

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).

@Walnussbaer
Copy link

I can confirm this bug in a Vue + Vite + Storybook project. I just upgraded to Storybook 8.2.7 from Storybook 7.

@Walnussbaer
Copy link

Walnussbaer commented Aug 6, 2024

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.

@messenjer
Copy link
Contributor

messenjer commented Aug 6, 2024

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',
    },

@Walnussbaer
Copy link

Walnussbaer commented Aug 6, 2024

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 :)

@Walnussbaer
Copy link

Walnussbaer commented Aug 6, 2024

BTW: I created a sandbox project with the Storybook CLI (npx [email protected] 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

@Bielousov
Copy link

Bielousov commented Aug 21, 2024

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

@kirtimaan-askin
Copy link

I can confirm that issue still persist with storybook v8.2.9 and Vite + react.

@messenjer
Copy link
Contributor

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 : #28867

@doppelmutzi
Copy link

I'm experiencing the same issue with Storybook 8.2.9, too.

@kharrop
Copy link

kharrop commented Aug 30, 2024

Tested in 8.3.0-beta.0 and still seeing this issue

@dzc0d3r
Copy link

dzc0d3r commented Aug 31, 2024

+1
storybook v8.2.9, vite + react

@kirtimaan-askin
Copy link

I can confirm that with version 8.3.0 this issue no more exists.

@7michele7
Copy link

Thanks for sorting this out 🥳

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment