NextJS 14应用路由中Botpress全屏WebChat加载失败求助

核心问题排查 #

你之前配置的containerWidth: "100%25"和layoutWidth: "100%25"是错误的——%25是%的URL编码值，直接写入配置会导致Botpress无法正确解析尺寸参数，这就是开启全屏配置后加载失败的核心原因，应直接使用"100%"作为参数值。

适配NextJS 14应用路由的配置步骤 #

1. 标记为客户端组件
   NextJS 14应用路由中，涉及DOM交互的组件必须声明为客户端组件，在你的WebChat组件文件顶部添加：

   'use client'
   

2. 修正全屏参数配置
   调整配置项，使用正确的尺寸字符串并搭配全屏开关：

   const webchatConfig = {
     botId: "你的机器人ID",
     hostUrl: "你的Botpress实例地址",
     containerWidth: "100%",
     layoutWidth: "100%",
     hideWidget: true,
     disableAnimations: true,
     // 其他必填配置项
   }
   

3. 用Tailwind设置容器全屏样式
   在承载WebChat的容器元素上添加Tailwind全屏类，确保容器占满视口且无溢出：

   <div className="w-screen h-screen overflow-hidden">
     <BotpressChat config={webchatConfig} />
   </div>
   

额外调试建议 #

• 打开浏览器控制台，检查是否存在样式冲突或JS报错，比如Tailwind全局样式是否覆盖了WebChat默认布局
• 确认Botpress实例地址和机器人ID配置正确，避免因网络请求失败导致加载异常

内容的提问来源于stack exchange，提问作者J.E.C.