{"action":"created","issue":{"url":"https://api.github.com/repos/Microsoft/BotFramework-WebChat/issues/740","repository_url":"https://api.github.com/repos/Microsoft/BotFramework-WebChat","labels_url":"https://api.github.com/repos/Microsoft/BotFramework-WebChat/issues/740/labels{/name}","comments_url":"https://api.github.com/repos/Microsoft/BotFramework-WebChat/issues/740/comments","events_url":"https://api.github.com/repos/Microsoft/BotFramework-WebChat/issues/740/events","html_url":"https://github.com/Microsoft/BotFramework-WebChat/issues/740","id":266683154,"number":740,"title":"can't execute file bin/server.js error given was window is not defined","user":{"login":"alansutherland","id":4670058,"avatar_url":"https://avatars1.githubusercontent.com/u/4670058?v=4","gravatar_id":"","url":"https://api.github.com/users/alansutherland","html_url":"https://github.com/alansutherland","followers_url":"https://api.github.com/users/alansutherland/followers","following_url":"https://api.github.com/users/alansutherland/following{/other_user}","gists_url":"https://api.github.com/users/alansutherland/gists{/gist_id}","starred_url":"https://api.github.com/users/alansutherland/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alansutherland/subscriptions","organizations_url":"https://api.github.com/users/alansutherland/orgs","repos_url":"https://api.github.com/users/alansutherland/repos","events_url":"https://api.github.com/users/alansutherland/events{/privacy}","received_events_url":"https://api.github.com/users/alansutherland/received_events","type":"User","site_admin":false},"labels":[{"id":404694084,"url":"https://api.github.com/repos/Microsoft/BotFramework-WebChat/labels/bug","name":"bug","color":"ee0701","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2017-10-19T00:22:46Z","updated_at":"2017-12-13T02:18:42Z","closed_at":null,"author_association":"NONE","body":"I'm building a React app based on [React Redux Universal Hot Example](https://github.com/erikras/react-redux-universal-hot-example)\r\n\r\nThis uses isomorphic/universal js so all code must work on both the server & client.\r\n\r\nI would like to embed a custom build of webchat in my app. I've followed your readme, an iframe works but since I can't customise the styling it is not an option. I've cloned your repo, updated the styling and published my project to npm as [suggested here](https://github.com/Microsoft/BotFramework-WebChat#hard-in-your-react-website-incorporate-a-custom-build-of-the-web-chat-component).\r\n\r\nI'm able to npm install my custom build of webchat as a dependency on my main app, however, importing it in to a component is another kettle of fish..\r\n\r\nThis is your example:\r\n\r\n    Import { Chat } from 'botframework-webchat';\r\n\r\n    const YourApp = () => {\r\n        <div>\r\n            <YourComponent />\r\n            <Chat directLine={{ secret: direct_line_secret }} user={{ id: 'user_id', name: 'user_name' }}/>\r\n            <YourOtherComponent />\r\n        </div>\r\n    }\r\n\r\nFor starters Import should be import but more importantly when I add this I get this error:\r\n\r\n> can't execute file: /bin/server.js\r\n> error given was: ReferenceError: window is not defined at /node_modules/webchat-style/built/Chat.d.ts\r\n\r\nDigging in to this it appears to be an isomoprhic issue, the server doesn't know what window is. I found a workaround so that webchat is only run on the client-side, this took time and still it's not really working. By requiring the webchat module after componentDidMount I can get around the isomorphic issue:\r\n\r\n    let Chat;\r\n    let webchat;\r\n\r\n    export default class App extends Component {\r\n\r\n      constructor() {\r\n        super();\r\n        this.state = { showChat: false };\r\n      }\r\n\r\n      componentDidMount() {\r\n        webchat = require('webchat-style');\r\n        Chat = webchat.Chat;\r\n        this.setState({ showChat: true });\r\n      }\r\n\r\n      render() {\r\n        return (\r\n          <div>{this.state.showChat ? <Chat directLine={{ secret: 'my_secret' }} user={{ id: user.name, name: user.id }}/> : 'Loading Chat'}</div>\r\n        );\r\n      }\r\n    }\r\n\r\nThe problem now is that while the chat window is embedded it has none of it's styling feeding through and when I try to send a message I get a lot of errors:\r\n\r\n> Warning: Attachments(...): No render method found on the returned component instance: you may have forgotten to define render, returned null/false from a stateless component, or tried to render an element whose type is a function that isn't a React component.\r\n> \r\n> ReactCompositeComponent.js:587 Uncaught TypeError: inst.render is not a function at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext\r\n> \r\n> invariant.js:39 Uncaught Error: findComponentRoot Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like form, p, or a, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID .2amp7vi9amg.1.0.\r\n>    \r\n> ReactCompositeComponent.js:559 Uncaught TypeError: Cannot read property _currentElement of null at ReactCompositeComponentWrapper._updateRenderedComponent\r\n\r\nI'm lost, please help. If you'd like to check my build of webchat it's available via npm install webchat-style  https://www.npmjs.com/package/webchat-style \r\n  "},"comment":{"url":"https://api.github.com/repos/Microsoft/BotFramework-WebChat/issues/comments/351260569","html_url":"https://github.com/Microsoft/BotFramework-WebChat/issues/740#issuecomment-351260569","issue_url":"https://api.github.com/repos/Microsoft/BotFramework-WebChat/issues/740","id":351260569,"user":{"login":"alansutherland","id":4670058,"avatar_url":"https://avatars1.githubusercontent.com/u/4670058?v=4","gravatar_id":"","url":"https://api.github.com/users/alansutherland","html_url":"https://github.com/alansutherland","followers_url":"https://api.github.com/users/alansutherland/followers","following_url":"https://api.github.com/users/alansutherland/following{/other_user}","gists_url":"https://api.github.com/users/alansutherland/gists{/gist_id}","starred_url":"https://api.github.com/users/alansutherland/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alansutherland/subscriptions","organizations_url":"https://api.github.com/users/alansutherland/orgs","repos_url":"https://api.github.com/users/alansutherland/repos","events_url":"https://api.github.com/users/alansutherland/events{/privacy}","received_events_url":"https://api.github.com/users/alansutherland/received_events","type":"User","site_admin":false},"created_at":"2017-12-13T02:18:42Z","updated_at":"2017-12-13T02:18:42Z","author_association":"NONE","body":"@compulim sure, please grant me permissions so I can create a branch?"}}
{"actor":{"display_login":"alansutherland"}}