React DirectLine chat doesn't works. Cannot find source files - reactjs

Question

Good morning to all, I'm new on BotFrameworkand React and I'm trying to embed my bot to my React website but it is not showing and I can see some errors on Node.js console.
I copied&pasted the sample on my code but now it needs the adaptiveCardsHostConfig and bot attribute, so I tried to add it and it fails.
Please, could you help me to know where I'm wrong?
First of all I executed npm install botframework-webchat command on console and then set the code above:
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"
/>
...
These are the warnings on node.js console:
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:\Users\dsanchis\source\repos\Modern Atum\BackEnd\CP.ModernAtum.API\node_modules\adaptivecards\lib'
# ./~/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:\Users\dsanchis\source\repos\Modern Atum\BackEnd\CP.ModernAtum.API\node_modules\adaptivecards\lib'
# ./~/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:\Users\dsanchis\source\repos\Modern Atum\BackEnd\CP.ModernAtum.API\node_modules\adaptivecards\lib'
# ./~/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:\Users\dsanchis\source\repos\Modern Atum\BackEnd\CP.ModernAtum.API\node_modules\adaptivecards\lib'
# ./~/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:\Users\dsanchis\source\repos\Modern Atum\BackEnd\CP.ModernAtum.API\node_modules\adaptivecards\lib'
# ./~/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:\Users\dsanchis\source\repos\Modern Atum\BackEnd\CP.ModernAtum.API\node_modules\adaptivecards\lib'
# ./~/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
And here the error on Chrome Console:
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
UPDATE(15/05/2018):
Now DirectLine component renders on page, but it has not proper style and I can't apply a style, just set with and height. It shows like below (with a transparent background, chooser file button and field...):
DirectLine bot showed without proper style
The warnings on Node.js console still appearing and now in Chrome console I can see a new error message:
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)
How can I solve the styles and add custom?

Answer 1

It's due to the .map files in the output (in the lib and dist folders). Remove them and you get rid of the webpack warnings.
Also see reported issue here: https://github.com/Microsoft/AdaptiveCards/issues/1492