Using vite and Storybook 8, sourceMap is not in sync with source

[ccsenter]

Summary

We are using Storybook 8.0.9 with Vite builder and it is now impossible to debug code in DevTools (worked with webpack though)
Once SB is up and running can't put a breakpoint into the source code in DevTools. Adding a debugger statement will trigger HMR and the code execution will stop at a line (probably the line where the debugger statement is) but it is completely out of sync with the source.
Here's the vite config:

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  const config = {
    assetsInclude: ['/sb-preview/runtime.js', '**/*.md'],
    define: {
      'process.env.STORYBOOK_STORIES': JSON.stringify(env.STORYBOOK_STORIES)
    },
    build: {
      sourcemap: true
    },
    css: {
      postcss: {
        plugins: [autoprefixer({ supports: false, remove: false })]
      }
    },
    plugins: [
      mdPlugin(),
      dynamicImport(),
      vanillaExtractPlugin(),
      preact()
    ]
  };
  return config;
});

Anybody else running into this? I didn't find to many issues reported on this.

Additional information

No response

Create a reproduction

No response

[ccsenter]

Just to add some more info...for *.stories.tsx files the code execution in DevTools will stop at a given debugger statement however we don't get the original source in DevTools (only the transpiled one).
For .tsx files (like the component implementation) it's the opposite: I can see the original source (not the transpiled code) but code execution will not stop at the debugger statement.

[jvanoostveen]

Have you find a solution yet? We're having the same problem, making it very hard to debug components within Storybook.

[valentinpalkovic]

Can you all please update the storybook to the latest version? We have improved source map support in recent versions of Storybook.

npx storybook@latest upgrade