Debug the JavaScript part of a hybrid React+Webpack+Django in VS Code

I have a hybrid Django + React application: the React frontend is built using Webpack, added to the static files and included in a Django template page (this is based on this tutorial Modern Javascript for Django Developers).

Is there a way of easily debugging the React/JavaScript part of the app in VS Code?

This question seems close but the breakpoints stay unbound for me despite including the line from its answer.

My entry point for React is in ./assets/app.js and the bundled file goes to ./static/js/js-bundle.js. Django serves the website on localhost:8000.

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  entry: './assets/app.js',  // path to our input file
  output: {
    filename: 'js/js-bundle.js',  // output bundle file name
    path: path.resolve(__dirname, 'static'),  // path to our Django static directory
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      filename: path.resolve(__dirname, 'templates', 'app.html'),
      template: path.resolve(__dirname, 'templates', 'app-template.html'),
    }),
    new MiniCssExtractPlugin({
      filename: "./css/[name].css", // change this RELATIVE to your output.path!
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: { presets: ["@babel/preset-env", "@babel/preset-react"] }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      },
    ]
  }
};

package.json

[...]
"scripts": {
  "dev": "webpack --mode development --watch",
  "dev-no-watch": "webpack --mode development"
},
[...]

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:8000",
            "webRoot": "${workspaceFolder}/assets",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
              "webpack:///./assets/*.js": "${workspaceRoot}/assets/*.js",
              "webpack:///./assets/*.tsx": "${workspaceRoot}/assets/*.tsx",
              "webpack:///./assets/*.ts": "${workspaceRoot}/assets/*.ts",
              "webpack:///./node_modules/*": "${workspaceRoot}/node_modules/*"
            }
          }
    ]
}

Back to Top