Converse.js v4.0.6嵌入式模式无法运行，求助排查

这个问题的核心原因很明确：嵌入式模式（view_mode: 'embedded'）下，Converse.js并不会加载ControlBoxView组件，而你遇到报错的converse-muc-views和converse-fullscreen两个插件，恰恰依赖这个仅在全屏/覆盖模式下存在的视图组件，所以加载时找不到目标就会抛出错误，最终导致页面渲染空白。

修复步骤 #

1. 排除冲突插件
   在converse.initialize的配置中，添加excluded_plugins选项，明确禁用这两个依赖ControlBoxView的插件——它们在嵌入式模式下完全用不上：

excluded_plugins: ['converse-muc-views', 'converse-fullscreen']

2. 确认容器样式有效性
   你设置的.converse-container { height: 55vh; }是合理的，但要确保这个样式不会被其他页面样式覆盖，保证Converse.js有足够的渲染空间。

修改后的完整代码 #

<!doctype html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet" type="text/css" media="screen" href="conversejs/converse.css" />
<script src="conversejs/converse.js" charset="utf-8"></script>
<style>
.converse-container { height: 55vh; }
</style>
<script>
converse.initialize({
allow_otr: true,
auto_list_rooms: false,
auto_subscribe: false,
bosh_service_url: 'http://localhost:7070/http-bind',
debug: true,
hide_muc_server: false,
prebind: false,
show_controlbox_by_default: true,
xhr_user_search: false,
view_mode: 'embedded',
// 添加这行排除冲突插件
excluded_plugins: ['converse-muc-views', 'converse-fullscreen']
});
</script>
</head>
<body>
<div class="converse-container">
<div id="conversejs"></div>
</div>
</body>
</html>

额外提示 #

如果你需要在嵌入式模式中使用多人聊天（MUC）功能，不要依赖converse-muc-views插件，而是应该使用Converse.js专门为嵌入式场景提供的独立MUC组件来配置。

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