使用Reactjs的Botframework无法在IE11上运行

Question

botframework with react is not working in IE, 带有React的botframework在IE中不起作用，

I'm using my index html file similar to 我正在使用类似于以下内容的索引html文件
https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/03.a.host-with-react , its working in chrome but not in IE, i tried using webchat-es5.js also. https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/03.a.host-with-react ，它在chrome中有效，但在IE中不起作用，我也尝试使用webchat-es5.js。

I'm using token given by bot team. 我正在使用机器人团队提供的令牌。

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Web Chat: Integrate with React</title>
   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
   <script src="https://unpkg.com/react@16.5.0/umd/react.development.js"></script>
   <script src="https://unpkg.com/react-dom@16.5.0/umd/react-dom.development.js"></script>
   <script src="https://unpkg.com/react-redux@5.0.7/dist/react-redux.min.js"></script>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
    <style>
      html, body { height: 100% }
      body { margin: 0 }
      #webchat {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
    <div id="webchat" role="main"></div>

   <script type="text/babel">
      function start() {
            const { createStore, ReactWebChat } = window.WebChat;
            const { Provider } = window.ReactRedux;
            const store = createStore();

            window.ReactDOM.render(
             <Provider store={ store }>
               <ReactWebChat
                  directLine={ window.WebChat.createDirectLine({ token:'mytoken' }) }
                 storeKey="webchat"
               />
             </Provider>,
             document.getElementById('webchat')
           );

            document.querySelector('#webchat > *').focus();
      }
      start();

    </script>
  </body>
</html>

working in Chrome but not in IE, somebody help me on this please. 在Chrome中工作，但不在IE中工作，请有人帮助我。

Answer 1

Unfortunatley, the "webchat-es5.js" package was designed for instantiating web chat via the window.WebChat.renderWebChat method. Unfortunatley，“ webchat-es5.js”包旨在通过window.WebChat.renderWebChat方法实例化网络聊天。 While the "webchat.js" package does allow for using window.ReactDOM.render , it is not designed for older browsers, such as IE. 尽管“ webchat.js”包确实允许使用window.ReactDOM.render ，但它不是为较旧的浏览器（例如IE）设计的。

I played with this a bunch and was simply unable to render web chat using window.ReactDOM.render while also in IE, despite utilizing any number of polyfills. 我玩了一堆，即使在IE中也无法使用window.ReactDOM.render渲染网络聊天，尽管使用了许多polyfill。 That being said, I was able to get the hosted React web chat sample to work in a proper React project with a few of modifications. 话虽这么说，我能得到托管阵营的网络聊天样品中有一些修改的适当项目做出反应的工作。 Please note, this also makes use of webpack. 请注意，这也利用了webpack。

Hope of help! 希望有帮助！

index.js: Nothing special or unexpected here. index.js：这里没有什么特别或意外的地方。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import './css/index.css';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

app.js: Just some necessary routing. app.js：只是一些必要的路由。

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import WebChatView from './webChatView';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route path="/" exact component={WebChatView} />
        </div>
      </Router>
    );
  }
}

export default App;

webChatView.js: Renders the web chat page (with some necessary styling) webChatView.js：呈现Web聊天页面（具有某些必要的样式）

import React, { Component } from 'react';
import WebChatView from './webchatView';

const FragmentStyling = {
  'container': {
    'display': 'flex',
    'justifyContent': 'center'
  },
  'div': {
    'height': '40rem',
    'minHeight': '20rem',
    'width': '1200px',
    'display': 'flex',
    'justifyContent': 'space-around',
    'marginTop': '2rem'
  }
}

class WebChatView extends Component {
  render() {
    return (
      <div style={FragmentStyling.container}>
        <div style={FragmentStyling.div}>
          <WebChatView id="webchat" role="main" />
        </div >
      </div>
    )
  }
}

export default WebChatView;

webchat.js: Several things to note: webchat.js：需要注意的几件事：

Either import '@babel/polyfill' needs to be included or all the 'core-js' imports listed below. 需要包括import '@babel/polyfill'或下面列出的所有“ core-js”导入。 Babel recommends importing only the required polyfills (to keep package size down). Babel建议仅导入所需的填充料（以减小包装尺寸）。 Those shown below are what is needed. 下面显示的是所需的。 However, using the '@babel' option works, as well. 但是，也可以使用“ @babel”选项。
Simply using fetch as-is breaks due to compatibility issues. 由于兼容性问题，简单地按原样使用fetch中断。 There may be other options, but the below 'whatwg-fetch' option works in both IE and Chrome. 可能还有其他选项，但是下面的“ whatwg-fetch”选项在IE和Chrome中均可使用。 Others I tested did not. 我测试过的其他人没有。
'fetching' the token needs to be promise-based. “获取”令牌需要基于承诺。 Using async/await breaks React web chat in IE. 使用异步/等待会中断IE中的React Web聊天。

import 'core-js/es6/map';
import 'core-js/es6/promise'
import 'core-js/es6/set';
import 'core-js/es6/symbol';
import 'core-js/fn/array/find-index';
import 'core-js/fn/array/includes';
import 'core-js/fn/math/sign';
import 'core-js/fn/object/assign';
import 'core-js/fn/string/starts-with';

import { fetch as fetchPolyfill } from 'whatwg-fetch';

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

export default class WebChat extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      directLine: null
    };
  }

  componentDidMount() {
    this.fetchToken();
  }

  fetchToken(token) {
    fetchPolyfill('http://localhost:3500/directline/token', { method: 'POST' })
      .then(res => res.json()) // expecting a json response
      .then(json =>
        this.setState(() => ({
          directLine: createDirectLine(
            {
              token: json.token
            }
          )
        }))
      )
  }

  render() {
    return (
      this.state.directLine ?
        <ReactWebChat
          directLine={this.state.directLine}
        />
        :
        <div>Connecting to bot&hellip;</div>
    )
  }
}

index.html: The 'react-polyfill.min.js' package needs to be included and should precede any other scripts that might live here. index.html： “ react-polyfill.min.js”包必须包含在内，并且应位于此处可能存在的任何其他脚本之前。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="//pitzcarraldo.github.io/react-polyfill/react-polyfill.min.js" charSet="UTF-8"></script>
    <title>React Web App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

webpack.config.js: The import 'script!react-polyfill' needs to be included at the top of this file. webpack.config.js： import 'script!react-polyfill'必须包含在此文件的顶部。

import 'script!react-polyfill';

const path = require('path');

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  mode: 'development'
};

使用Reactjs的Botframework无法在IE11上运行

问题描述

1 个解决方案

解决方案1
1 2019-08-21 02:40:12

使用Reactjs的Botframework无法在IE11上运行

问题描述

1 个解决方案

解决方案1 1 2019-08-21 02:40:12

解决方案1
1 2019-08-21 02:40:12