Webpack & Debugging - Githubissues

I am new to Fable, but have watched a number of Roman and your youtube videos on the Dev Owl channel.

The project appears to be out of date. The webpack.config.js schema has changed with version 5.58.2 webpack. In order to get the code to run I had to make the following changes:

// Note this only includes basic configuration for development mode.
// For a more comprehensive configuration check:
// https://github.com/fable-compiler/webpack-config-template

var path = require("path");

module.exports = {
    mode: "development",
    entry: "./src/App.fs.js",
    output: {
        path: path.join(__dirname, "./public"),
        filename: "bundle.js",
    },
    devServer: {
        static: {
            publicPath: "/",
            directory: "./public",
        },
        port: 8080,
    },
    module: {
        rules: [{
            test: /\.fs(x|proj)?$/,
            use: "fable-loader"
        }]
    }
}

I am also having trouble debugging the fable code using Visual Code version 1.61.2 and v5.8.1 of the Ionide plugin. I have had to adapt the .vscode/launch.json as the Browser Preview and the Chrome Debugger plugins seem to be deprecated.

I am currently using the following launch.json file:

{
  "version": "0.2.0",
  "configurations": [
      {
          "name": "Debug with Edge",
          "type": "pwa-msedge",
          "request": "launch",
          "preLaunchTask": "Watch Client",
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}/src",
          "sourceMaps": true,
          "sourceMapPathOverrides": {
              "webpack:///*": "${workspaceFolder}/*",
          }
      },
      {
          "name": "Debug with Chrome",
          "type": "pwa-chrome",
          "request": "launch",
          "preLaunchTask": "Watch Client",
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}/src",
          "sourceMaps": true,
          "sourceMapPathOverrides": {
              "webpack:///*": "${workspaceFolder}/*",
          }
      }
  ],
}

When I start debugging, the code builds and webpack starts but the browser window is never shown. I can see the "Watch Client" task running but nothing else happens.

The tasks.json file contents are the same as the repository. Although I did try:

          "command": "dotnet",
          "args": [ "fable", "watch", "src", "--run", "webpack-dev-server" ],

Do you have any suggestions as to what is going wrong?

Many thanks.

Zaid-Ajaj / fable-getting-started

Webpack & Debugging #23