search

microsoft / BotFramework-WebChat

A highly-customizable web-based client for Azure Bot Services.
https://www.botframework.com/
MIT License
1.58k stars 1.53k forks source link

microsoft-speech-browser-sdk exports not defined #2052

Closed Hatzman91 closed 5 years ago

Hatzman91 commented 5 years ago

Version

npm Package 4.4.2 in a native JS application (no react/angular/typescript) used: npm and Node v11.3.0

Describe the bug

Uncaught ReferenceError: exports is not defined at eval (webpack-internal:///./node_modules/microsoft-speech-browser-sdk/distrib/src/sdk/speech/RecognizerConfig.js:7) at Module../node_modules/microsoft-speech-browser-sdk/distrib/src/sdk/speech/RecognizerConfig.js (index.js:8654) at webpack_require (index.js:30) at eval (webpack-internal:///./node_modules/microsoft-speech-browser-sdk/distrib/src/sdk/speech/Recognizer.js:11) at Object../node_modules/microsoft-speech-browser-sdk/distrib/src/sdk/speech/Recognizer.js (index.js:8642) at webpack_require (index.js:30) at eval (webpack-internal:///./node_modules/microsoft-speech-browser-sdk/distrib/src/sdk/speech/Exports.js:21) at Object../node_modules/microsoft-speech-browser-sdk/distrib/src/sdk/speech/Exports.js (index.js:8606) at webpack_require__ (index.js:30) at eval (webpack-internal:///./node_modules/microsoft-speech-browser-sdk/distrib/Speech.Browser.Sdk.js:13) (anonymous) @ webpack-internal:///./node_modules/microsoft-speech-browser-sdk/distrib/src/sdk/speech/RecognizerConfig.js:7 ./node_modules/microsoft-speech-browser-sdk/distrib/src/sdk/speech/RecognizerConfig.js @ index.js:8654 webpack_require @ index.js:30 (anonymous) @ webpack-internal:///./node_modules/microsoft-speech-browser-sdk/distrib/src/sdk/speech/Recognizer.js:11 ./node_modules/microsoft-speech-browser-sdk/distrib/src/sdk/speech/Recognizer.js @ index.js:8642 webpack_require @ index.js:30 (anonymous) @ webpack-internal:///./node_modules/microsoft-speech-browser-sdk/distrib/src/sdk/speech/Exports.js:21 ./node_modules/microsoft-speech-browser-sdk/distrib/src/sdk/speech/Exports.js @ index.js:8606 webpack_require @ index.js:30 (anonymous) @ webpack-internal:///./node_modules/microsoft-speech-browser-sdk/distrib/Speech.Browser.Sdk.js:13 ./node_modules/microsoft-speech-browser-sdk/distrib/Speech.Browser.Sdk.js @ index.js:8174 webpack_require @ index.js:30 (anonymous) @ webpack-internal:///./node_modules/web-speech-cognitive-services/lib/BingSpeech/SpeechToText/createSpeechRecognitionPonyfill.js:30 ./node_modules/web-speech-cognitive-services/lib/BingSpeech/SpeechToText/createSpeechRecognitionPonyfill.js @ index.js:12298 webpack_require @ index.js:30 (anonymous) @ webpack-internal:///./node_modules/web-speech-cognitive-services/lib/BingSpeech/index.js:34 ./node_modules/web-speech-cognitive-services/lib/BingSpeech/index.js @ index.js:12442 webpack_require @ index.js:30 (anonymous) @ webpack-internal:///./node_modules/botframework-webchat/lib/createCognitiveServicesBingSpeechPonyfillFactory.js:26 ./node_modules/botframework-webchat/lib/createCognitiveServicesBingSpeechPonyfillFactory.js @ index.js:3890 webpack_require @ index.js:30 (anonymous) @ webpack-internal:///./node_modules/botframework-webchat/lib/index.js:53 ./node_modules/botframework-webchat/lib/index.js @ index.js:3938 webpack_require @ index.js:30 (anonymous) @ webpack-internal:///./src/index.js:17 ./src/index.js @ index.js:12843 webpack_require @ index.js:30 0 @ index.js:12866 webpack_require__ @ index.js:30 (anonymous) @ index.js:94 (anonymous) @ index.js:97 webpackUniversalModuleDefinition @ index.js:9 (anonymous) @ index.js:10 Show 3 more frames

I hope you can help :)

corinagum commented 5 years ago

@Hatzman91, could you provide reproduction steps for this scenario? Thanks!

Hatzman91 commented 5 years ago

@corinagum, i just installed botframework-webchat with npm, and then tried to use it with Directline

Disclaimer I work for AXA (Switzerland) and we have some components of our own, but they work, as soon as i implement the botframework stuff, i get the error on load of the site, but it compiles without a problem

My Code looks like this:

Code

import '@axa-ch/patterns-library-polyfill';
import { DirectLine } from 'botframework-directlinejs';
import React, { Fragment, createElement } from 'react';
import ReactDOM from 'react-dom';
import createAXAButtonReact from '@axa-ch/button/lib/index.react';
import ReactWebChat from 'botframework-webchat';

import './index.scss';

const AXAButton = createAXAButtonReact(createElement);

export default class PodChatbot {
  // elem is the DOM node where the pod will be atatched on
  // options are the data attributes of the pod
  constructor(elem, options) {
      this.elem = elem;
      this.options = options;
      this.directLine = new DirectLine({ token: '' });

      this.init();
  }

  init() {
    ReactDOM.render(<Fragment>
      <AXAButton icon="plus"></AXAButton>
      <ReactWebChat directLine={ this.directLine } />
    </Fragment>, this.elem);
  }
}
Hatzman91 commented 5 years ago

Can you give me a status update?

Have you any idea what could've caused this issue?

tdurnford commented 5 years ago

@Hatzman91 I'm having a difficult time reproducing your issue. Can you provide more detail regarding how you have your project configured including your webpack configs. Thanks.

Hatzman91 commented 5 years ago

package.json

{
  "description": "TBD",
  "main": "lib/index.js",
  "dependencies": {
    "@axa-ch/button": "latest",
    "@axa-ch/patterns-library-polyfill": "latest",
    "botframework-webchat": "^4.4.2",
    "react": "^16.8.3",
    "react-dom": "^16.8.3"
  },
  "devDependencies": {
    "@axa-ch/generic-release": "latest",
    "autoprefixer": "^8.6.5",
    "@babel/core": "^7.3.3",
    "@babel/plugin-proposal-class-properties": "^7.3.3",
    "@babel/plugin-transform-regenerator": "^7.4.4",
    "@babel/plugin-transform-runtime": "^7.4.0",
    "@babel/preset-env": "^7.3.1",
    "@babel/runtime": "^7.4.4",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-custom-element-classes": "^0.1.0",
    "babel-eslint": "^8.2.1",
    "eslint": "^4.10.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.4.0",
    "config": "^1.30.0",
    "cross-env": "^5.2.0",
    "css-loader": "^0.28.11",
    "cssnano": "^3.10.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.0",
    "postcss": "^7.0.14",
    "postcss-loader": "^2.1.5",
    "postcss-strip-font-face": "^1.0.0",
    "rimraf": "^2.6.3",
    "rollup": "^1.1.2",
    "rollup-plugin-babel": "^4.3.2",
    "rollup-plugin-node-resolve": "^4.0.0",
    "rollup-plugin-replace": "^2.1.0",
    "rollup-plugin-sass": "^1.1.0",
    "sass-loader": "^7.0.1",
    "style-loader": "^0.21.0",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4",
    "@babel/preset-react": "^7.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\"",
    "clean-lib": "rimraf lib",
    "build": "npm run clean-lib && cross-env NODE_ENV=production rollup --config ./rollup.config.js",
    "release": "generic-release",
    "start": "webpack-dev-server"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/axa-ch/pod-chatbot.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/axa-ch/pod-chatbot/issues"
  },
  "homepage": "https://github.com/axa-ch/pod-chatbot#readme",
  "name": "@axa-ch/pod-chatbot",
  "version": "0.0.0"
}

webpack

const path = require('path');
const webpack = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const config = require('config');
const fs = require('fs');
const babelrc = JSON.parse(fs.readFileSync(`${__dirname}/.babelrc`));
const { sep } = path;

/*-------------------------------------------------*/
const outputPath = 'lib';

module.exports = {
    // webpack optimization mode
    mode: ( process.env.NODE_ENV ? process.env.NODE_ENV : 'development' ),

    // entry file(s)
    entry: './src/index.js',

    // output file(s) and chunks
    output: {
        library: 'PodChatbot',
        libraryTarget: 'umd',
        libraryExport: 'default',
        path: path.resolve(__dirname, outputPath),
        filename: 'index.js',
        publicPath: config.get('publicPath')
    },

    // module/loaders configuration
    module: {
        rules: [
            {
                test: /.js$/,
                include: [
                  /src/,
                  new RegExp(`node_modules${sep}lit-html`),
                  new RegExp(`node_modules${sep}lit-element`),
                  new RegExp(`node_modules${sep}@axa-ch(?!${sep}patterns-library-polyfill)`),
                ],
                use: {
                  loader: 'babel-loader',
                  options: {
                    ...babelrc
                  }
                }
            },
            {
                test: /.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    },

    plugins: [
        new HTMLWebpackPlugin({
            template: path.resolve(__dirname, 'index.html')
        })
    ],

    // development server configuration
    devServer: {

        // must be true for SPAs
        historyApiFallback: true,

        // open browser on server start
        open: config.get('open')
    },

    // generate source map
    devtool: ( 'production' === process.env.NODE_ENV ? 'source-map' : 'cheap-module-eval-source-map' ),
};
tdurnford commented 5 years ago

I'm not exactly sure where the error in your configuration is, but I was able to put together a simple project using ReactWebChat and Webpack. See the code snippets below.

code

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

const directLine = createDirectLine({ secret: '<WEB_CHAT_SECRET>' })

ReactDOM.render(
  <>
    <ReactWebChat className="chat" directLine={ directLine } />
  </>, 
document.getElementById("root"));

package.json

{
  "name": "webpack-chat",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "botframework-webchat": "^4.4.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.4"
  }
}

webpack

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

I will continue to looking into this, but I figured I'd give you a status update. Let me know if you make any progress on your end.

tdurnford commented 5 years ago

@Hatzman91 Are you still having an issue with this?

corinagum commented 5 years ago

Closing due to inactivity :)

Hatzman91 commented 5 years ago

I am so sorry I was on vacation from thursday till yesterday and I didn't see that you wrote!

i just upgraded all packages to the newest versions, still the same issue :(

@tdurnford did your project work or did it throw the same error as mine?

Hatzman91 commented 5 years ago

I now went the way and just created it with create-react-app and it worked flawlessly

So you don't have to do anything now, sorry for the work i created, I will work this out with our UX team

As soon as i have an answer I will give an update as soon as we have an answer to this

corinagum commented 5 years ago

Keep us updated!

tdurnford commented 5 years ago

@Hatzman91 Great to hear you've got it working! My webpack config worked fine.

Hatzman91 commented 5 years ago

I got it "exclude: /node_modules/," was missing, as soon as I used that, it worked!

Thanks for your help!