zaid-ajaj / fable-getting-started Goto Github PK
View Code? Open in Web Editor NEWTemplate for getting started with Fable
License: MIT License
Template for getting started with Fable
License: MIT License
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
devtool: "source-map"
in the webpack config to be able to debug App.fs?dist
instead of public
, and is this the default output destination in webpack, since you just erasedoutput: {
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...
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 ๐
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.