Debugging of a React Typescript project not working in JetBrains Rider

Question

What I want to do

I have a React Typescript project and I want to setup a debug configuration in Rider, which fulfills the following criteria:

• a dev server is started with hot reloading, so when I change files, the application gets updated automatically
• a javascript debugger gets attached to the running application, so I can set breakpoints in the jsx files inside of Rider (not in Chrome DevTools) and the application actually stops at the breakpoint
• I prefer to use webpack directly and not indirectly through create-react-app

What's working

I currently run my application on the webpack dev server with webpack serve for development purposes. The dev server is running and I can debug the typescript code in Chrome DevTools successfully as you can see here .

The problem

As mentioned above, now I want to attach a debugger from inside Rider, so I can set breakpoints directly in my IDE - and that's where I failed.

What I've tried

In the Jetbrains documentation for debugging a webpack application ( https://www.jetbrains.com/help/rider/Using_Webpack.html#debug_application_that_uses_webpack ) I was told that the debugging should work the same as for React applications that were setup with create-react-app. So I followed the instructions here: https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/?_ga=2.129883279.2614435.1634130690-1852059688.1626293073 .

1. I ran yarn start from within the run configuration in debug mode. This executed webpack serve as defined in my package.json.

The page was available at http://localhost:9000 and I got the following output in the process console:

/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run start --scripts-prepend-node-path=auto
Debugger listening on ws://127.0.0.1:42631/294d3b20-969f-486e-917e-22c6350d23e4
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.

> applicationName@1.0.0 start
> webpack serve

Debugger listening on ws://127.0.0.1:33159/3b5cb2c1-674a-4d9c-888f-b3bdf6f3d3a6
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:9000/
[...]

However, if I ctrl+shift+click on the http://localhost:9000/ link from the console, I get the following error .

My client app folder is located inside of a sub folder of a C# project (SolutionName/AppliationName/ClientApp), which I use as a backend. Can this maybe cause the problem?

I'm kinda stuck here, so I'm happy for all help. :)

Below you will find further information about my system and the relevant files.

My environment

• OS: Ubuntu 20.04.2
• IDE: Rider 2021.2.2
• versions of the dependencies are listed in the package.json below

Files

package.json

{
   [...]
   "scripts": {
        "start": "webpack serve",
        "watch": "webpack --watch",
        "build": "tsc && NODE_ENV=production webpack",
        "build-dev": "webpack"
    },
    "dependencies": {
        "@types/react": "^17.0.21",
        "@types/react-dom": "^17.0.9",
        "@types/typescript": "^2.0.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
    },
    "devDependencies": {
        "@babel/core": "^7.15.8",
        "@babel/preset-env": "^7.15.8",
        "@babel/preset-react": "^7.14.5",
        "@babel/preset-typescript": "^7.15.0",
        "@webpack-cli/generators": "^2.4.0",
        "webpack": "^5.58.1",
        "webpack-cli": "^4.9.0",
        "webpack-dev-server": "^4.3.1",
        "workbox-webpack-plugin": "^6.3.0",
        "babel-loader": "^8.2.2",
        "css-loader": "^6.4.0",
        "file-loader": "^6.2.0",
        "style-loader": "^3.3.0",
        "ts-loader": "^9.2.6",
        "html-webpack-plugin": "^5.3.2",
        "mini-css-extract-plugin": "^2.4.2",
        "prettier": "^2.4.1",
        "typescript": "^4.4.3"
    }
}

webpack.config.js

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')

let mode = "development";
if (process.env.NODE_ENV === "production") {
  mode = "production";
}

module.exports = {
  mode: mode,
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            cacheDirectory: true,
            presets: [
              ["@babel/preset-env", { targets: { node: "8" } }],
              "@babel/preset-typescript",
              "@babel/preset-react"
            ]
          }
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
    ]
  },
  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    extensions: [".tsx", ".ts", ".jsx", ".js", "..."],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
    open: true,
    hot: true
  },
  // generate source maps to debug the initial source files
  devtool: "source-map"
}

Answer 1

The reason for the problems was that chromium was installed with snap . This doesn't work, but if you install the chromium packages directly from the debian repository everything works perfectly.

More details here: https://rider-support.jetbrains.com/hc/en-us/community/posts/4409573673746-Javascript-Debugging-not-working-in-Rider