---
# System prepended metadata

title: 在其他 react 專案中引入 webchat
tags: [GSS]

---

# 在其他 react 專案中引入 webchat
###### tags: `GSS`

## 修正：
會出現 Render 失敗是因為我少加了 setContainer 的關係，加上之後就正常了
```diff
Configuration.initial(rawConfig).then((config) => {
  createDirectLine(config.directLineOptions).then((directLine) => {
    setConfig(config);
    SetDirectLine(directLine)
  })
});
+ setContainer(document.getElementById('root'))
```
## 結果：
![](https://i.imgur.com/2zC4hO9.png)

## 試過的方法
1. 將整個專案複製到新的 react 專案中的 src 中
2. 將原專案的 src 內的東西複製到 src 中

以上兩種方法都可以在新的專案中顯示 PreviewMessage 這個 component

![](https://i.imgur.com/EDGK0ci.png)

但是不論哪種方法都不能 render 出 WebChat or MinimizableWebChat。都會噴類似這樣的錯誤

![](https://i.imgur.com/BoWBf1V.png)

現在的方法是將微軟webchat 放在 windows 底下，並在 WebChat compoent 中將他 render 出來，所以我用了另一個方法

先 install 微軟的 webchat component 
```bash
npm install botframework-webchat 
```

並且將 window.WebChat 改成微軟的 webchat component

``` diff
- const { ReactWebChat } = window.WebChat;
+ import ReactWebChat from 'botframework-webchat';
```

``` js
<ReactWebChat
    userID={userId}
    username={userName}
    locale={locale}
    className={`${className || ''} web-chat`}
    directLine={directLine}
    store={store}
    styleSet={this.createStyleSet(styleOptions)}
    activityMiddleware={this.activityMiddleware}
/>
```

這樣之後不論是 WebChat 還是 MinimizableWebChat 都可以顯示出來，但是會出現第一張圖的錯誤

![](https://i.imgur.com/hP4EDnp.png)

但是如果你發送訊息並且重新整理的話，訊息是可以發出去的