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

## 修正：
會出現 Render 失敗是因為我少加了 setContainer 的關係，加上之後就正常了

Configuration.initial(rawConfig).then((config) => {
  createDirectLine(config.directLineOptions).then((directLine) => {
    setConfig(config);
    SetDirectLine(directLine)
  })
});
+ setContainer(document.getElementById('root'))

## 結果：

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

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


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


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

先 install 微軟的 webchat component

npm install botframework-webchat 

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

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

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

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


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