zaid-ajaj / fable-getting-started Goto Github PK

Just cloned this repo while starting to follow https://zaid-ajaj.github.io/the-elmish-book/ . Upon running npm install, I got the following errors:

Removing node_modules, package-lock.json, and running npm install again resolved my issues, although I got this warning:

Just wanted to give a heads up. Don't know the ecosystem well enough to know if simply updating the dependencies is enough to fix this, but it worked for me.

Platform: Windows 10
Shell: Git Bash for Windows (with zsh)
Nodejs: v18.4.0
fable-compiler: 2.13.0

I am trying to run through the code examples from "The Elmish Book". (Thank you very much for this book. Reading it really helps understand what's going on.)

I cloned this repository, removed the .git directory (since I have a "parent" local git repository already), and then executed npm install. Installing packages succeeded with warnings and some audit flags.

I then ran npm run build and encountered an error I'm at loss to investigate. Here's my shell output:

larry.jones in fable-getting-started on laj/proto/use-npm
λ npm run build

build
webpack

fable-compiler 2.13.0
fable: Compiled src\App.fsproj
C:\Users\larry.jones\professional\projects\the-elmish-book\fable-getting-started\node_modules\loader-runner\lib\LoaderRunner.js:106
throw new Error("callback(): The callback was already called.");
^

Error: callback(): The callback was already called.
at context.callback (C:\Users\larry.jones\professional\projects\the-elmish-book\fable-getting-started\node_modules\loader-runner\lib\LoaderRunner.js:106:10)
at C:\Users\larry.jones\professional\projects\the-elmish-book\fable-getting-started\node_modules\fable-loader\index.js:147:9
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Node.js v18.4.0

I've joined the F# Software Foundation and am awaiting my invitation to the slack channel, but thought this repository might be an appropriate place to raise this issue.

Thanks.

P.S. My first set of steps, which produced the same error, involved deleting the node_modules directory and package-lock.json and running yarn install. This start eventually led to the same error.

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.

I was following The Elmish Book and the Fable compilation hangs because of the early Fable 4 version in the tools manifest: 4.0.0-snake-island-alpha-021.

When I changed it to 4.9.0, compilation succeeded.
It would be good to update version in this reference repo so no one else would trip on this.

Thank you,
Viktoras

@Zaid-Ajaj I know its been a while since your last commit, but I have some questions

I watched the dev-owl video on youtube. Are the following correct

1. You need devtool: "source-map" in the webpack config to be able to debug App.fs?
2. Why did you change to dist instead of public, and is this the default output destination in webpack, since you just erased

output: {
        path: path.join(__dirname, "./public"),
        filename: "bundle.js",
    },

in last commit from webpack config?

Does the missing source map file have anything to do with you changing mode from mode: "development" to mode: "none" in your last commit? Is this why main.js.map is suddenly missing (without the devtool: "source-map")?

I thought so because I can see you still have both bundle.js and bundle.js.map in GIT ignored. So source mapping used to be generated earlier...

Addendum

I watched the rest of the video, and saw there used to be

devtool: isProduction ? 'source-map' : 'eval-source-map'

in the web config. I always code along any tutorial, because learning is about trying/playing not watching/reading 😉