Inconsistent behaviour of fable watch with node

[rinfz]

Description

After setting up the default template for Feliz, running npm start which in turn runs dotnet tool restore && dotnet fable watch src --runFast vite leads to inconsistent behaviour resulting in the node process being closed or never started. There aren't any errors that are printed to the console. Running with --verbose only mentions type checking and "compilation complete".

I've seen the following cases:

1. Running the fable command never starts the node process.
2. Running the fable command starts a process which is killed a few seconds later.
3. The command works correctly but at some point during hot reloading after editing a file, the process is killed.

In all cases, the local site is then inaccessible.

I also tried with --run instead of --runFast but it makes no difference (and seems that the vite command is run before the compilation finished anyway).

Repro code

Follow the quick start guide from the Feliz repo. I've seen this issue with no code changes.

dotnet new -i Feliz.Template
dotnet new feliz -n MyProject
cd MyProject
npm install
npm start

Expected and actual results

Expected: The local dev site runs consistently without silently failing. Subsequent edits can be made to existing files without the process also crashing silently.

Actual: See the list in "Description".

Related information

• Fable version: 4.0.1
• Operating system: macOS 13.2.1 (M1)
• node --version: v18.17.1
• npm --version: 9.6.7
• fsproj contains <TargetFramework>net6.0</TargetFramework> (although the template defaults to net7.0)
• Also have a global.json (not sure if it's needed):

  {
  "sdk": {
  "version": "6.0.0",
  "rollForward": "latestMinor"
  }
  }

[MangelMaxime]

Can you please try using the latest version of Fable and check if the problem still exist with that version?

dotnet tool update fable should update Fable to the latest version

[rinfz]

I still see the same issues with version 4.1.4.

[MangelMaxime]

Hello @rinfz,

I was able to reproduce the problem however the problem is not with Fable but how vite works.

I suspect that because Vite doesn't see any JavaScript files in the src then it just doesn't load or stop its process.

If I do:

dotnet new -i Feliz.Template
dotnet new feliz -n MyProject
cd MyProject
npm install
npm start
# Ctrl+C
npm start

Then now I can access the website site locally.

What is strange is that you say that --run doesn't work for you when for me to works even on a fresh repo because Fable wait for the first compilation to happen before executing vite.

I added an empty fake.js in the src folder and run using --runFast, and in that case vite process stay alive which seems to confirm my suspicion.

[rinfz]

Good investigation, thanks @MangelMaxime. Personally, I had success with just running vite and dotnet watch separately as a workaround.

I know some other js tooling makes use of the concurrently package on npm for running multiple-process dev builds so that could be useful here.

However since no one else is really reporting this issue and it's more of a vite problem than a fable one, I will close the ticket.

[MangelMaxime]

Your welcome, my other workaround for situation like that is to first run Fable in non watch mode to have files generated.

And then, run Fable and Vite concurrently in watch mode. It should not add too much time because Fable with use the result of the cache the second time.