Chrome devtools not loading svelte components files with the same name

[marcofilippozzi]

Chrome devtools don't show different svelte files with the same name in Sources. The files are in different folders obviously. I've used the template projects as an example: This is the webpack.config.js code:

const path = require('path');

const mode = process.env.NODE_ENV || 'development';
const prod = mode === 'production';
module.exports = {
    entry: {
        'build/bundle': ['./src/main.js']
    },
    resolve: {
        alias: {
            svelte: path.dirname(require.resolve('svelte/package.json'))
        },
        extensions: ['.mjs', '.js', '.svelte'],
        mainFields: ['svelte', 'browser', 'module', 'main']
    },
    output: {
        path: path.join(__dirname, '/public'),
        filename: '[name].js',
        chunkFilename: '[name].[id].js'
    },
    module: {
        rules: [
            {
                test: /\.svelte$/,
                use: {
                    loader: 'svelte-loader',
                    options: {
                        compilerOptions: {
                            dev: !prod
                        },
                        emitCss: prod,
                        hotReload: !prod
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                // required to prevent errors from Svelte on Webpack 5+
                test: /node_modules\/svelte\/.*\.mjs$/,
                resolve: {
                    fullySpecified: false
                }
            }
        ]
    },
    mode,
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        })
    ],
    devtool: 'source-map',
    devServer: {
        hot: true
    }
};

This is what I see in Devtools - Sources after running the project with npm run dev:

As you see, all .svelte files are put in the top level of svelte-app, and only one of the two App.svelte is shown.

I'm sorry if this is not the right repo where to report this issue.

[marcofilippozzi]

Turns out the sourcemap was not being created correctly. Adding outputFilename: 'preprocess.bundle.js.map' solved the issue:

rules: [
            {
                test: /\.(html|svelte)$/,
                use: {
                    loader: 'svelte-loader',
                    options: {
                        compilerOptions: {
                            dev: true,
                                                        outputFilename: 'preprocess.bundle.js.map'
                        },
                        emitCss: false,
                        hotReload: true
                    },
                },
            }
        ]