Couldn't find story matching id 'undefined' after importing a CSF file.

[Shuraz]

I am trying to run storybook 8.5 on Svelte5 with webpack5. Able to load storybook on local, but not getting stories. It show: Couldn't find story matching id 'undefined' after importing a CSF file.

.storybook/main.js has

/** @type { import('@storybook/svelte-webpack5').StorybookConfig } /
const config = {
stories: ["../src/**/.mdx", "../src/**/*.stories.@(js|ts|svelte)"],
addons: [
"@storybook/addon-svelte-csf",
"@storybook/addon-essentials",
"@chromatic-com/storybook",
"@storybook/addon-interactions",
],
framework: {
name: "@storybook/svelte-webpack5",
options: {},
},
core: {
builder: 'webpack5', // Ensure Webpack 5 is used
},
};
export default config;

[webpack.config.js has: ]

const path = require('path');

module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /.svelte$/,
use: 'svelte-loader',
},
{
test: /.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /.(png|jpe?g|gif|svg)$/i,
use: 'file-loader',
},
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
}
],
},
resolve: {
extensions: ['.mjs', '.js', '.svelte'],
mainFields: ['svelte', 'browser', 'module', 'main'],
conditionNames: ['svelte', 'browser', 'import'],
},
devServer: {
static: {
directory: path.join(__dirname, 'public'),
},
compress: true,
port: 9001,
},
mode: 'development',
};