htmlf#fable-f#elmish

Project Doesn't Load With Elmish-React


I have a simple elmish react project directly from the template and when I run it it loads the public index.html page but nothing else and stucks eternely loading (I presume) the bundle.js from the webpack

I picked the Fable template added the Fable.Elmish.React(nuget), react(npm) and react-dom(npm) packages

App.fs

module App

open Fable.React
open Fable.React.Props
open Elmish
open Elmish.React
open Elmish.ReactNative

type Model = Empty

type Msg = NOP

let init () = Empty, Cmd.ofMsg NOP

let update msg model = 
  match msg with
    NOP -> model, Cmd.ofMsg NOP

let view model dispatch = 
  div [] [
    h1 [] [str "Hello, world!"]
  ]

Program.mkProgram init update view
|> Program.withReactBatched "container"
|> Program.run

Index.html

<!doctype html>
<html>
<head>
  <title>TGG</title>
  <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script defer src="bundle.js"></script>
</head>
<body>
  <div class="container">
</body>
</html>

Solution

  • I ended up finding the answer myself

    The problem was on the init function

    let init () = Empty, Cmd.ofMsg NOP
    

    There were two problems, the first being that the Empty was refering to a HTML element instead of the mock model i was using to set everything up, the other that is a lesser problem was the part Cmd.ofMsg NOP I should be using Cmd.none instead