Fable freezing with --run vite

[lukaszkrzywizna]

Description

Hi,

After upgrading from Webpack to Vite.js, I've noted that Fable freezes during HMR/Fast-Refresh. The problem is critical because it happens quite often for big projects/files (like my production application).

I've been able to reproduce the error for a small project:

Repro code

1. Create an application using a template from SAFEr.Template
2. Quickly add code and save the file alternately (for my production project I don't have to do this, updating code randomly causes freeze)

The video shows the problem:

fable_freeze.mp4

You can see that at some point Fable stops responding with the last message of Started fable compilation..., however, Vite and the application still work.

Related information

• Fable version: 4.5.0
• Operating system: Mac OS 14 Sonoma

[MangelMaxime]

Hum, this kind of issue remind me of the system being out of inotify watcher but I think it was happening to me on Linux.

Can you reproduce without running vite?

Can you also try to use set Vite to use polling?

https://vitejs.dev/config/server-options.html#server-watch

Could you please try to use set export DOTNET_USE_POLLING_FILE_WATCHER=1?

[lukaszkrzywizna]

After a few minutes of testing, I can confirm that:

• export DOTNET_USE_POLLING_FILE_WATCHER=1 doesn't work
• use polling doesn't work
• without vite works
• running fable and vite as two separated processes works

Based on that, I suspect the problem is with running vite using the fable's --run parameter.
I will continue testing my production app but so far, the last option gives me no freezes.

[lukaszkrzywizna]

I confirm - running fable and vite separately resolve the issue.

[MangelMaxime]

Thank you for sharing the work around.

I am not sure why there is a problem when running it via Fable. In theory Fable, just spawn the process and forget about it especially on Unix system where we don't need to kill the child process ourself compared to windows.

[MangelMaxime]

I am experiencing the same problem but I have also also when running the processes separately...

[lukaszkrzywizna]

I am experiencing the same problem but I have also also when running the processes s

Does running with sudo help somehow?

[MangelMaxime]

I feel like my problem is more related to my build project.

I am running the processes from an F# project to orchestrate everything. And was noticing some strange overlapping in the console output. I am using a combination of SimpleExec and Async.Parallel.

    Async.Parallel
        [
            // Command.RunAsync("npx", "vite") |> Async.AwaitTask

            Command.RunAsync("npx",
                CmdLine.empty
                |> CmdLine.appendRaw "nodemon"
                |> CmdLine.appendPrefix "-e" "module.scss"
                |> CmdLine.appendPrefix "--exec" Build.fcmCommand
                |> CmdLine.toString
            ) |> Async.AwaitTask

            Command.RunAsync(
                "dotnet",
                CmdLine.empty
                |> CmdLine.appendRaw "fable"
                |> CmdLine.appendRaw "watch"
                |> CmdLine.appendRaw "src/tk.Client/tk.Client.fsproj"
                |> CmdLine.appendRaw "--sourceMaps"
                |> CmdLine.appendRaw "--noCache"
                |> CmdLine.appendRaw "--run"
                |> CmdLine.appendRaw "npx vite"
                |> CmdLine.toString
            )
            |> Async.AwaitTask
        ]
    |> Async.RunSynchronously
    |> ignore

I also tried with running vite independently but still got some issues.

What is strange is that I think did similar things in the past without problems.

Also running the processus separately using NPM scripts doesn't seems to cause any issues. Which makes me think that something is strange in the build system.

  "scripts": {
    "build-css-modules": "npx fcm ./src/tk.Client/ --outFile src/tk.Client/CssModules.fs",
    "watch-fable": "dotnet fable watch ./src/tk.Client/ --sourceMaps",
    "watch-css-modules": "npx nodemon -e module.scss --exec pnpm run build-css-modules",
    "watch-vite": "npx vite",
    "watch": "pnpm run build-css-modules && npx concurrently --kill-others \"npm:watch-*\""
  },

[marcingolenia]

Same here; Ubuntu 22.04.3 LTS
I am using this command instead to run it in separate processes as @lukaszkrzywizna advised.
"dev": "dotnet fable watch & vite &"
this works

[MangelMaxime]

Another command which fix this issue is to run Fable in verbose mode:

dotnet fable --verbose --run vite

We believe the issue is that both Fable and Vite are rewriting the console history and this is causing an issue somewhere.

Using --verbose switch Fable in a mode where it doesn't rewrite the console output but keep appending to it.

[laurentpayot]

FYI, I have the same issue so I tried the "experimental" vite-plugin-fable and it’s been working great so far. It’s perfect for a Fable + Vite stack.