System Info

System:
OS: macOS 14.3.1
CPU: (10) arm64 Apple M1 Max
Memory: 469.64 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
Yarn: 1.22.22 - /usr/local/bin/yarn
npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
pnpm: 9.7.0 - ~/.nvm/versions/node/v18.18.0/bin/pnpm
Watchman: 2023.10.09.00 - /usr/local/bin/watchman
Browsers:
Chrome: 127.0.6533.100
Safari: 17.3.1

Details

The output of SourceMapDevToolPlugin is different from the output of devtool: 'source-map'. The generated code contains jsx and other helper functions which make debugging difficult especially in larger codebases. Check out the screenshots below:

Reproduce link

No response

Reproduce Steps

1. Create an empty rsbuild project using npm create rsbuild@latest
2. Build with the following config file:

import { defineConfig } from '@rsbuild/core';
import {SourceMapDevToolPlugin} from '@rspack/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
    tools: {
      rspack: {
        devtool: false,
        plugins: [
          new SourceMapDevToolPlugin({
            filename: '[file].map[query]',
          }),
        ]
      }
    },
    plugins: [pluginReact()],
});

3. Comment the plugins array, change to devtool: 'source-map' and build again.
4. Compare the generated source maps