Using the npm version of botframework-webchat causes an issue with browserify-sign package during bundling.

Hi, I have been using the CDN version of botframework-webchat in my app without any issues, but recently decided to switch to the npm version. However, ever since I installed the npm version, I get a strange error in my console Uncaught TypeError: First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object. as shown below:-

browserify-sign is not a direct dependency of my application and until I was importing botframework-webchat from CDN, this issue did not come up. It was only after I switched to importing the npm version does this happen.

I am using botframework-webchat version 4.7.1, along with webpack version 4.39.3.

Here is my webpack config for your reference:

var webpack = require("webpack");
const CompressionPlugin = require("compression-webpack-plugin");
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
    module: {
    rules: [
      {
        test: /\.html$/,
        loader: "html-loader"
      },
      {
        test: /\.(scss|css)$/,
        loaders: ["style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /\.(png|jpg|gif)(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=
      },
     {
        test: /\.(eot|com|ttf|woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/octet-stream"
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=image/svg+xml"
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
            options: {
                presets: ["@babel/preset-react", "@babel/preset-env"]
              }
          }
       },
      {
        type: "javascript/auto",
        test: /\.json$/,
        use: [
           {
              loader: "file-loader",
              options: {
                 name: "[name].[ext]"
                   }
            }
          ]
       }
    ]
  },
  optimization: {
  minimize: true
  },
  devServer: {
     disableHostCheck: true,
     proxy: {
       "/api": "http://localhost:8000"
      },
     stats: {
      children: false,
      modules: false
     }
  },
   plugins: [
     new webpack.DefinePlugin({
       "process.env": {
          NODE_ENV: JSON.stringify("production")
        }
    }),
    new webpack.optimize.AggressiveMergingPlugin(),
    new CompressionPlugin({
      filename: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
      threshold: 10240,
      minRatio: 0.8
    }),
    new webpack.ProvidePlugin({
        Promise: "es6-promise-promise"
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html",
      inject: 'body'
    })
   ]
};

[corinagum]

Hi @manishams10, thanks for the information. We’ll get a repro going on our side and get back to you.

[compulim]

Nailed it!

In your webpack.config.js, your .json module resolver is loading files thru file-loader. It should be loaded from json-loader.

Since JSON files are not loaded properly, this line in browserify-sign will not load the algorithms.json properly.

You can look at the repro with the fix at https://github.com/compulim/botframework-webchat-repro-2804.

The fix your app, you can apply the diff below.

  var webpack = require("webpack");
  const CompressionPlugin = require("compression-webpack-plugin");
  const HtmlWebPackPlugin = require("html-webpack-plugin");
  
  module.exports = {
      module: {
      rules: [
        {
          test: /\.html$/,
          loader: "html-loader"
        },
        {
          test: /\.(scss|css)$/,
          loaders: ["style-loader", "css-loader", "sass-loader"]
        },
        {
          test: /\.(png|jpg|gif)(\?v=\d+\.\d+\.\d+)?$/,
          loader: "url-loader?limit=
        },
       {
          test: /\.(eot|com|ttf|woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
          loader: "url-loader?limit=10000&mimetype=application/octet-stream"
        },
        {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          loader: "url-loader?limit=10000&mimetype=image/svg+xml"
        },
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
              options: {
                  presets: ["@babel/preset-react", "@babel/preset-env"]
                }
            }
         },
        {
          type: "javascript/auto",
          test: /\.json$/,
          use: [
             {
-               loader: "file-loader",
+               loader: "json-loader",
                options: {
                   name: "[name].[ext]"
                     }
              }
            ]
         }
      ]
    },
    optimization: {
    minimize: true
    },
    devServer: {
       disableHostCheck: true,
       proxy: {
         "/api": "http://localhost:8000"
        },
       stats: {
        children: false,
        modules: false
       }
    },
     plugins: [
       new webpack.DefinePlugin({
         "process.env": {
            NODE_ENV: JSON.stringify("production")
          }
      }),
      new webpack.optimize.AggressiveMergingPlugin(),
      new CompressionPlugin({
        filename: "[path].gz[query]",
        algorithm: "gzip",
        test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
        threshold: 10240,
        minRatio: 0.8
      }),
      new webpack.ProvidePlugin({
          Promise: "es6-promise-promise"
      }),
      new HtmlWebPackPlugin({
        template: "./src/index.html",
        filename: "./index.html",
        inject: 'body'
      })
     ]
  };