0

When my content script crashes, the line numbers shown in the stack trace in the console refer to the processed JS code, not to my original code. This is not the case for the popup script. Here is my webpack.config.js:

const path = require("path");
const HTMLPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin")

module.exports = {
    entry: {
        index: "./src/index.js",
        content: "./src/content.js"
    },
    mode: "development",
    devtool: 'cheap-module-source-map',
    module: {
        rules: [
            {
              test: /\.js?$/,
               use: "babel-loader",
               exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
        ],
    },
    plugins: [
        new CopyPlugin({
            patterns: [
                { from: "manifest.json", to: "../manifest.json" },
            ],
        }),
        ...getHtmlPlugins(["index"]),
        ...getHtmlPlugins(["content"]),
    ],
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    output: {
        path: path.join(__dirname, "dist/js"),
        filename: "[name].js",
    },
    watchOptions: {
        poll: true,
        ignored: /node_modules/
    }
};

function getHtmlPlugins(chunks) {
    return chunks.map(
        (chunk) =>
            new HTMLPlugin({
                title: "React extension",
                filename: `${chunk}.html`,
                chunks: [chunk],
            })
    );
}

How do I fix this, so I can debug my content script?

AlwaysLearning
  • 7,257
  • 4
  • 33
  • 68

0 Answers0