Botframework-webchat: SSR React hydrate not supported by ReactWebChat

[vglu]

Hi,

React Chat component (standard example)

import React, { useMemo, useState } from 'react';
import ReactWebChat, { createDirectLine } from 'botframework-webchat';
function ChatComponent() {
    const [directLine, setDirectLine] = useState();
    let a;
    useMemo(async () => {
      const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
     });

    const { token } = await res.json();
    setDirectLine(createDirectLine({ token }));
    }, []);

    return (
      <section>
        <header>Chat component is using React {React.version}</header>
        <div>Token:{a}</div>
        <div className="react-container webchat">
          {!!directLine && <ReactWebChat directLine={directLine}/>}
        </div>
      </section>
    );
  }

  export default ChatComponent;

If we trying to use React hydrate we have got list of errors:

1) react-film\lib\browser.js:7

var _navigator = navigator,
                 ^

ReferenceError: navigator is not defined

2) botframework-webchat-component\lib\Utils\TypeFocusSink\getTabIndex.js:7

var _window = window,
              ^

ReferenceError: window is not defined

3) botframework-webchat-component\lib\Composer.js:477

  locale: window.navigator.language || 'en-US',
          ^

ReferenceError: window is not defined

4) botframework-webchat\lib\index-minimal.js:98

window['WebChat'] = _objectSpread({}, window['WebChat'], {
^

ReferenceError: window is not defined

5) web-speech-cognitive-services\lib\SpeechServices.js:65

var meta = document.createElement('meta');
           ^

ReferenceError: document is not defined

6) botframework-webchat\lib\index.js:121

window['WebChat'] = _objectSpread({}, window['WebChat'], {
^

ReferenceError: window is not defined

expected behavior - react component should support standard React methods.

Regards,
Vitaliy

[v-kydela]

@vglu - Hello and thank you for the post.

Can you explain what you mean when you say "React hydrate"? Are you calling ReactDOM.hydrate() somewhere? In any case, please show the code where you're using React hydrate so that we can try to reproduce the problem.

It's also unclear why you think the errors you've posted are related to React hydrate. Are you saying the code that is throwing those errors works fine when you disable the code that's using React hydrate?

[tdurnford]

@v-kydela @vglu I think the issue is that Web Chat makes references to browser interfaces such as window, document, and navigator which are not available in Server Side Rendering (SSR). Web Chat will have to add additional logic around these global variables throughout the code base to support SSR.

[vglu]

Hi @v-kydela
@tdurnford absolutely right.

For example ... I want to use SSR with React component and express ...

index.js something like this

import React from "react";
import { hydrate } from "react-dom";
import App from "./app";
import * as serviceWorker from './serviceWorker';

hydrate(<App />, document.getElementById("reactele"));

serviceWorker.unregister();

App with call ReactComponent

import React from "react";
import ChatComponent from './ChatComponent';

class App extends React.Component {
  constructor() {
    super();
  }

  render() {
    return (
          <div className="react-container">
            <ChatComponent />
          </div>
    );
  }
}
export default App;

ChatComponent - example from examples folder

import React, { useMemo, useState } from 'react';
import ReactWebChat, { createDirectLine } from 'botframework-webchat';

function ChatComponent() {
    const [directLine, setDirectLine] = useState();

    useMemo(async () => {
      const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });

    const { token } = await res.json();
    setDirectLine(createDirectLine({ token }));
    }, []);

    return (
      <section>
        <header>Chat component is using React {React.version}</header>
        <div className="react-container webchat">
          {!!directLine && <ReactWebChat directLine={directLine}/>}
        </div>
      </section>
    );
  }

  export default ChatComponent;

In this case - I'll try to generate component on server side and server side has no window, browser, nav .... elements.

For my opinion - we should notice unsupported SSR with this component on release note document or adopt it for run in SSR.

Thanks

Regards,
Vitaliy

[compulim]

When we work on #3212 and #3234 for React Native (which also lacks of window and some features), I believe we will figure this one out.

I agree we need to document that SSR is unsupported, if we don't hit it at R10 (after #3234). Hit it = a sample showing Web Chat rendered using SSR.

@vglu could you follow the bug #3212 to get more status on this work?

Closed to fold it to #3212.