Elmish-React项目运行异常 卡在bundle.js加载阶段无内容渲染

页面卡死、bundle加载无响应是三个核心问题共同导致的：

1. 无限消息循环死锁：init函数初始化时直接派发NOP消息，update函数处理NOP消息时又再次派发NOP消息，程序启动后会陷入无限消息派发的死循环，根本没有机会执行渲染逻辑，主线程被占满导致页面永久卡住。
2. DOM挂载点不匹配：Program.withReactBatched "container"默认查找id="container"的DOM元素作为React挂载根节点，但index.html中只写了class="container"的div，没有对应id的元素，就算死循环问题修复，React也找不到挂载位置无法渲染内容。
3. 多余依赖引入：代码中引用了Elmish.ReactNative，这个库是给React Native跨端应用使用的，Web项目引入会打包进不必要的原生端逻辑，可能引发额外的运行时异常。

按以下步骤修改代码即可：

• 移除无限消息循环逻辑：初始化和消息处理时不要无意义重复派发NOP消息，无后续操作时返回Cmd.none即可。
• 统一挂载点标识：将HTML中根div的class="container"改为id="container"，和Elmish的挂载选择器匹配（不推荐用class选择器做挂载点，class可重复容易出现匹配错误）。
• 删除Web项目不需要的引用：移除open Elmish.ReactNative语句，避免引入无关的原生端代码。

修复后代码示例 #

App.fs #

module App

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

type Model = Empty
type Msg = NOP

// 初始化时不派发多余消息，避免启动即死循环
let init () = Empty, Cmd.none

let update msg model = 
  match msg with
    NOP -> model, Cmd.none // 消息处理完成后不重复派发，终止循环

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

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

index.html 核心片段 #

<body>
  <!-- 改为id匹配挂载选择器 -->
  <div id="container"></div>
  <script defer src="bundle.js"></script>
</body>

修改完成后重新执行webpack打包、启动项目即可正常渲染Hello World内容。

内容的提问来源于stack exchange，提问作者fourglobe