React DirectLine 聊天不起作用。找不到源文件

Question

大家早上好，我是 BotFramework和 React 的新手，我正在尝试将我的机器人嵌入到我的 React 网站，但它没有显示，我可以在 Node.js 控制台上看到一些错误。

我将示例复制并粘贴到我的代码上，但现在它需要自适应卡主机配置和机器人属性，所以我尝试添加它，但它失败了。 拜托，你能帮我知道我错在哪里吗？

首先，我在控制台上执行了npm install botframework-webchat命令，然后设置上面的代码：

import { Chat } from 'botframework-webchat';
...
<Chat
adaptiveCardsHostConfig={{ fontFamily: '"Myriad Pro", sans-serif' }}
directLine={{ secret: 'asV4w25M-8I.cwA._-M.o-eAeWrQg0MMJcup3bU8klFEPiKoOhIPV8HZHytS0r0' }}
user={{ id: 'userid', name: 'username' }}
bot={{ id: 'botID', name: 'botName' }}
resize="detect"
/>
...

以下是节点.js控制台上的警告：

WARNING in ./~/adaptivecards/lib/adaptivecards.js
(Emitted value instead of an instance of Error) Cannot find source file '../src/adaptivecards.ts': Error: Can't resolve '../src/adaptivecards.ts' in 'C:UsersdsanchissourcereposModern AtumBackEndCP.ModernAtum.APInode_modulesadaptivecardslib'
@ ./~/botframework-webchat/built/Attachment.js 6:22-46
@ ./~/botframework-webchat/built/BotChat.js
@ ./app/src/components/Header/Header.tsx
@ ./app/src/components/Layout/Layout.tsx
@ ./app/src/components/Search/Search.tsx
@ ./app/src/components/GroupsExplorer/GroupsExplorer.tsx
@ ./app/src/index.tsx
@ multi es6-promise whatwg-fetch ./app/src/index.tsx
WARNING in ./~/adaptivecards/lib/enums.js
(Emitted value instead of an instance of Error) Cannot find source file '../src/enums.ts': Error: Can't resolve '../src/enums.ts' in 'C:UsersdsanchissourcereposModern AtumBackEndCP.ModernAtum.APInode_modulesadaptivecardslib'
@ ./~/adaptivecards/lib/adaptivecards.js 7:9-27
@ ./~/botframework-webchat/built/Attachment.js
@ ./~/botframework-webchat/built/BotChat.js
@ ./app/src/components/Header/Header.tsx
@ ./app/src/components/Layout/Layout.tsx
@ ./app/src/components/Search/Search.tsx
@ ./app/src/components/GroupsExplorer/GroupsExplorer.tsx
@ ./app/src/index.tsx
@ multi es6-promise whatwg-fetch ./app/src/index.tsx
WARNING in ./~/adaptivecards/lib/utils.js
(Emitted value instead of an instance of Error) Cannot find source file '../src/utils.ts': Error: Can't resolve '../src/utils.ts' in 'C:UsersdsanchissourcereposModern AtumBackEndCP.ModernAtum.APInode_modulesadaptivecardslib'
@ ./~/adaptivecards/lib/adaptivecards.js 9:14-32
@ ./~/botframework-webchat/built/Attachment.js
@ ./~/botframework-webchat/built/BotChat.js
@ ./app/src/components/Header/Header.tsx
@ ./app/src/components/Layout/Layout.tsx
@ ./app/src/components/Search/Search.tsx
@ ./app/src/components/GroupsExplorer/GroupsExplorer.tsx
@ ./app/src/index.tsx
@ multi es6-promise whatwg-fetch ./app/src/index.tsx
WARNING in ./~/adaptivecards/lib/host-config.js
(Emitted value instead of an instance of Error) Cannot find source file '../src/host-config.ts': Error: Can't resolve '../src/host-config.ts' in 'C:UsersdsanchissourcereposModern AtumBackEndCP.ModernAtum.APInode_modulesadaptivecardslib'
@ ./~/adaptivecards/lib/adaptivecards.js 8:9-33
@ ./~/botframework-webchat/built/Attachment.js
@ ./~/botframework-webchat/built/BotChat.js
@ ./app/src/components/Header/Header.tsx
@ ./app/src/components/Layout/Layout.tsx
@ ./app/src/components/Search/Search.tsx
@ ./app/src/components/GroupsExplorer/GroupsExplorer.tsx
@ ./app/src/index.tsx
@ multi es6-promise whatwg-fetch ./app/src/index.tsx
WARNING in ./~/adaptivecards/lib/text-formatters.js
(Emitted value instead of an instance of Error) Cannot find source file '../src/text-formatters.ts': Error: Can't resolve '../src/text-formatters.ts' in 'C:UsersdsanchissourcereposModern AtumBackEndCP.ModernAtum.APInode_modulesadaptivecardslib'
@ ./~/adaptivecards/lib/card-elements.js 16:21-49
@ ./~/adaptivecards/lib/adaptivecards.js
@ ./~/botframework-webchat/built/Attachment.js
@ ./~/botframework-webchat/built/BotChat.js
@ ./app/src/components/Header/Header.tsx
@ ./app/src/components/Layout/Layout.tsx
@ ./app/src/components/Search/Search.tsx
@ ./app/src/components/GroupsExplorer/GroupsExplorer.tsx
@ ./app/src/index.tsx
@ multi es6-promise whatwg-fetch ./app/src/index.tsx
WARNING in ./~/adaptivecards/lib/card-elements.js
(Emitted value instead of an instance of Error) Cannot find source file '../src/card-elements.ts': Error: Can't resolve '../src/card-elements.ts' in 'C:UsersdsanchissourcereposModern AtumBackEndCP.ModernAtum.APInode_modulesadaptivecardslib'
@ ./~/adaptivecards/lib/adaptivecards.js 6:9-35
@ ./~/botframework-webchat/built/Attachment.js
@ ./~/botframework-webchat/built/BotChat.js
@ ./app/src/components/Header/Header.tsx
@ ./app/src/components/Layout/Layout.tsx
@ ./app/src/components/Home/Home.tsx
@ ./app/src/components/GroupsExplorer/GroupsExplorer.tsx
@ ./app/src/index.tsx
@ multi es6-promise whatwg-fetch ./app/src/index.tsx

这是Chrome控制台上的错误：

Uncaught TypeError: action$.ofType(...).map(...).filter(...).throttleTime is not a function
at sendTypingEpic (app.bundle.js:10062)
at app.bundle.js:78455
at Array.map (<anonymous>)
at app.bundle.js:78454
at MapSubscriber.project (app.bundle.js:78520)
at MapSubscriber._next (app.bundle.js:27998)
at MapSubscriber.Subscriber.next (app.bundle.js:3631)
at Subject.next (app.bundle.js:8134)
at app.bundle.js:78530
at app.bundle.js:78646

---

更新(15/05/2018(：

现在 DirectLine 组件在页面上呈现，但它没有正确的样式，我无法应用样式，只能设置和高度。它如下所示(具有透明背景，选择器文件按钮和字段... 显示的直线机器人没有适当的样式

Node.js控制台上的警告仍然出现，现在在Chrome控制台中我可以看到一条新的错误消息：

Uncaught TypeError: Cannot read property 'offsetWidth' of null
at e.componentDidUpdate (botchat.js:34)
at t.notifyAll (botchat.js:34)
at r.close (botchat.js:34)
at r.closeAll (botchat.js:20)
at r.perform (botchat.js:20)
at o.perform (botchat.js:20)
at o.perform (botchat.js:20)
at Object.S [as flushBatchedUpdates] (botchat.js:20)
at r.closeAll (botchat.js:20)
at r.perform (botchat.js:20)

如何解决样式并添加自定义？

Answer 1

这是由于输出中的文件.map(在lib和dist文件夹中(。删除它们，您就可以摆脱 webpack 警告。

另请参阅此处报告的问题：https://github.com/Microsoft/AdaptiveCards/issues/1492