can't execute file bin/server.js error given was window is not defined

[pixelomo]

I'm building a React app based on React Redux Universal Hot Example

This uses isomorphic/universal js so all code must work on both the server & client.

I 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.

I'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..

This is your example:

Import { Chat } from 'botframework-webchat';

const YourApp = () => {
    <div>
        <YourComponent />
        <Chat directLine={{ secret: direct_line_secret }} user={{ id: 'user_id', name: 'user_name' }}/>
        <YourOtherComponent />
    </div>
}

For starters Import should be import but more importantly when I add this I get this error:

can't execute file: /bin/server.js
error given was: ReferenceError: window is not defined at /node_modules/webchat-style/built/Chat.d.ts

Digging 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:

let Chat;
let webchat;

export default class App extends Component {

  constructor() {
    super();
    this.state = { showChat: false };
  }

  componentDidMount() {
    webchat = require('webchat-style');
    Chat = webchat.Chat;
    this.setState({ showChat: true });
  }

  render() {
    return (
      <div>{this.state.showChat ? <Chat directLine={{ secret: 'my_secret' }} user={{ id: user.name, name: user.id }}/> : 'Loading Chat'}</div>
    );
  }
}

The 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:

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.

ReactCompositeComponent.js:587 Uncaught TypeError: inst.render is not a function at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext

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 when using tables, nesting tags like form, p, or a, or using non-SVG elements in an parent. Try inspecting the child nodes of the element with React ID .2amp7vi9amg.1.0.

ReactCompositeComponent.js:559 Uncaught TypeError: Cannot read property _currentElement of null at ReactCompositeComponentWrapper._updateRenderedComponent

I'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

[pixelomo]

@danmarshall any chance you can help with this?

[danmarshall]

Hi @AlanSutherland rendering on the server is not a supported scenario. The Web Chat control only works in a purely client side, DOM environment.

[pixelomo]

@danmarshall thanks for the reply, I'm not rendering on the server, I found a workaround by requiring webchat within componentDidMount so it's only rendered client-side

[danmarshall]

@AlanSutherland ok, so the styling is just simple CSS files that you will need to reference somewhere in your HTML document.

[pixelomo]

@danmarshall It's not a problem with styling, I've updated the SASS. But the stylesheet isn't being loaded. Guess either it isn't rendering properly or I messed up my build somehow?

The main thing I want help with this is understanding these error messages that are shown when I try to send a message:

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.

ReactCompositeComponent.js:587 Uncaught TypeError: inst.render is not a function at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext

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 when using tables, nesting tags like form, p, or a, or using non-SVG elements in an parent. Try inspecting the child nodes of the element with React ID .2amp7vi9amg.1.0.

ReactCompositeComponent.js:559 Uncaught TypeError: Cannot read property _currentElement of null at ReactCompositeComponentWrapper._updateRenderedComponent

[compulim]

We did a bad thing here, the stateless React component should not return null. We should move the null check to line 74.

@AlanSutherland are you interested in making a PR for this?

[pixelomo]

@compulim sure, please grant me permissions so I can create a branch?

[billba]

Instead, please fork the repo and create a branch there.

[billba]

@compulim what's wrong with returning null there?

[compulim]

My bad. Looks like React team fixed returning null in stateless component in React 15.

@AlanSutherland are you on React 14 for this?

[pixelomo]

yep using 15.6.1

[compulim]

@AlanSutherland is the problem fixed now?

[compulim]

Closing due to inactivity.