reactjs - 为什么 React 将其错误引用到我的包而不是源映射（Webpack 5.44.8）？

Question

我是“警告：列表中的每个孩子都应该有一个唯一的“关键”道具。” 错误，所以我决定在我的 Webpack 配置中实现源映射。这似乎有效。我可以在浏览器 (FireFox) 中查看我的源地图，并且我有一个 main.map.js 文件作为名为“main.js”的包的子文件。此外，我通过故意打错字来测试源地图，并且错误引用了我的源地图。

但是，React 错误返回我的包中的位置而不是源映射。

Check the render method of `Table`. See https://reactjs.org/link/warning-keys for more information.
    at http://localhost:3000/main.js:34174:66
    at Table (http://localhost:3000/main.js:118750:18)
    at ReactTable (http://localhost:3000/main.js:118684:13)

这是我的 webpack.config.js 内容：

const path = require('path');
const webpackResolveConfig = require(path.resolve(__dirname, 'webpack.config.resolve.js'));

const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
    mode: 'development',
    target: isDevelopment ? 'web' : 'browserslist',
    entry: './src/index.tsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        watchContentBase: true,
        filename: 'bundle.js',
        compress: true,
        hot: true,
        host: 'localhost',
        port: 3000,
        historyApiFallback: true,
        clientLogLevel: 'debug',
    },
    devtool: isDevelopment ? 'source-map' : 'eval-cheap-source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                enforce: "pre",
                use: ["source-map-loader"],
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules|\.d\.ts$/
            },
            {
                test: /\.d\.ts$/,
                loader: 'ignore-loader'
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.css$/i,
                use: [
                    "style-loader",
                    // Translates CSS into CommonJS
                    "css-loader",
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    autoprefixer()
                                ]
                            }
                        }
                    },
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    "style-loader",
                    // Translates CSS into CommonJS
                    "css-loader",
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    autoprefixer()
                                ]
                            }
                        }
                    },
                    // Compiles Sass to CSS
                    {
                        loader: "sass-loader",
                        options: {
                            // Prefer dart-sass
                            implementation: require("sass"),
                            // See https://github.com/webpack-contrib/sass-loader/issues/804
                            webpackImporter: false,
                            sassOptions: {
                                fiber: require("fibers"),
                                includePaths: ['./node_modules']
                            }
                        }
                    }
                ],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            inject: 'body',
        }),
    ],
    ...webpackResolveConfig,
};

如果您想知道，这是我的 webpack.config.resolve.js 内容：

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

/**
 * Determine the array of extensions that should be used to resolve modules.
 */
module.exports = {
    resolve: {
        modules: ['node_modules'],
        plugins: [new TsconfigPathsPlugin({})],
        extensions: [
            '.js', '.jsx',
            '.ts', '.tsx',
            '.scss', '.css',
            '.json',
        ]
    },
};

标签： reactjswebpacksource-maps