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

[Termindiego25]

Good morning to all, 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?

[stevengum]

Cross linking to SO Post: https://stackoverflow.com/questions/50270368/react-directline-chat-doesnt-works-cannot-find-source-files

[compulim]

@Termindiego25 this is bug #997. The current implementation of carousel requires calculation of container width. It's fixed.