Botbuilder-js: Webpack bundling broken

[ballwood]

Versions

What package version of the SDK are you using. Latest
What nodejs version are you using. 8.10.0
What browser version are you using N/A
What os are you using Linux

Describe the bug

After 4.1.7 - polyfill fixes broke webpack bundling
Commit here: https://github.com/Microsoft/botbuilder-js/commit/a20a44c638332eea1666cde4907fe66d552f5224#diff-a4cb641e4ac7086ddd5b5af0968c47f4
Webpack cannot 'see' the require therefore leaves it in tries to look in node_modules

To Reproduce

Steps to reproduce the behavior:

1. Bundle app using bot framework with webpack
2. Run bundle (tries to load form-data from node_modules), throws module error

Expected behavior

Not to throw module error and form-data, node-fetch to be included in the bundle

Additional context

Webpack used for bundling code on lambdas due to size limit

[bug]

[cleemullins]

@juanar Any update on this?

[gasper-az]

Hi @cleemullins,

We were able to reproduce this issue, and we find out that this was failing because the botframework-connector library uses a dynamic import (which are set in execution time), but Webpack uses the imports generated in compile time.

To solve this issue we are investigating two possible approaches. The first one would be adding magic comments to the import statement, and the second one is changing the way we are doing the imports.

[stevengum]

@ballwood, you shouldn't need the botframework-connector library unless you're hooking a browser-hosted bot to the Bot Framework channel service. Can you explain your scenario a little further?

[ballwood]

@stevengum

Our setup would be considered non standard as we are using FaaS so we can scale our bot down to 0 and everything is stateless and lambda native (we don't use express). Apologies if any of the following below contains naming errors, I can't remember specific names of the services in Azure.

Our flow is as follows:

• User sends message to bot via Teams, which triggers Azure Bot Service
• Azure Bot Service -> POSTS request to our registered HTTP endpoint (AWS Api Gateway/Lambda - webpacked so our lambda's are small and don't include deps that are not needed).
• We validate the request
• We process the message using our own internal engine and generate a response
• We then use MicrosoftAppCredentials & ConnectorClient to authenticate with Azure Bot Service
• We then send the response back using sendActivity
• Response then is displayed to user in teams

Reading the docs it states the following in the readme.md

Microsoft Bot Framework Connector for Node.js
Within the Bot Framework, the Bot Connector service enables your bot to exchange messages with users on channels that are configured in the Bot Framework Portal.

If the connector client is supposed to only be used for browser based bots could you please point me in the direction of the correct library to use & update the readme.md as from the text above it is confusing.

[tmuntianu]

@ballwood has the issue been resolved for you?

I've tried on Node 8.10.0, 10.16.0, and 12.7.0, as well as SDK v4.5.3, 4.40, 4.1.5, and the latest preview of 4.6.0, but I haven't managed to get webpack working.

I'm getting the same warning, Critical dependency: require function is used in a way in which dependencies cannot be statically extracted for both botbuilder-ai and botframework-connector

The warning pops up both in my project but also in the QnAMaker example when using webpack.

is there something I'm missing, or is this still broken? I would like to avoid a massive node_modules folder in my deployment.

[ali-yolobe]

@tmuntianu @ballwood Why is closed? Looks like it is still the issue. I can reproduce it.

[ballwood]

I don't know the issue just got closed randomly

[ali-yolobe]

@gasper-az I am just wondering if there was any decision on the approach, I would like to contribute a fix for this. Apparently this line:
(new Function('require', 'if (!this.hasOwnProperty("FormData")) { this.FormData = require("form-data"); }; if (!this.hasOwnProperty("fetch")) { this.fetch = require("node-fetch"); }'))(require);

in botframework-connector/lib/index.js has broken the webpack. I am wondering what why the magic-comments can be used?

[langri-sha]

Experiencing the same issue. Does anyone have a workaround?

[ballwood]

@langri-sha use an older version, seems to work on that

[langri-sha]

Here's my workaround for the current version:

// webpack.config.js
// ------------------------------------------------------------------------------

{
  resolve: {
    alias: {
        'botframework-connector$': require.resolve('./src/lib/botframework-connector')
    }
  }
}

// src/lib/botframewok-connector.js
// ------------------------------------------------------------------------------

// @flow

// Fixes broken webpack bundling in the package.
//
// See: https://github.com/microsoft/botbuilder-js/issues/818
//
// NB: at current date 2019-12-01, the issue has been incorrectly closed.

import formData from 'form-data'
import fetch from 'node-fetch'

global.FormData = formData
global.fetch = fetch

export * from 'botframework-connector/lib/auth'
export {
  ConnectorClient
} from 'botframework-connector/lib/connectorApi/connectorClient'
export {
  TokenApiClient,
  TokenApiModels
} from 'botframework-connector/lib/tokenApi/tokenApiClient'
export { EmulatorApiClient } from 'botframework-connector/lib/emulatorApiClient'
export * from 'botframework-connector/lib/tokenApi/models'
export * from 'botframework-connector/lib/teams'

[deepakmahakale]

Here's my workaround for the current version:

// webpack.config.js
// ------------------------------------------------------------------------------

{
  resolve: {
    alias: {
        'botframework-connector$': require.resolve('./src/lib/botframework-connector')
    }
  }
}

// src/lib/botframewok-connector.js
// ------------------------------------------------------------------------------

// @flow

// Fixes broken webpack bundling in the package.
//
// See: https://github.com/microsoft/botbuilder-js/issues/818
//
// NB: at current date 2019-12-01, the issue has been incorrectly closed.

import formData from 'form-data'
import fetch from 'node-fetch'

global.FormData = formData
global.fetch = fetch

export * from 'botframework-connector/lib/auth'
export {
  ConnectorClient
} from 'botframework-connector/lib/connectorApi/connectorClient'
export {
  TokenApiClient,
  TokenApiModels
} from 'botframework-connector/lib/tokenApi/tokenApiClient'
export { EmulatorApiClient } from 'botframework-connector/lib/emulatorApiClient'
export * from 'botframework-connector/lib/tokenApi/models'
export * from 'botframework-connector/lib/teams'

Now I am getting

Error: Cannot find module './src/lib/botframework-connector'

[95gabor]

Here's my workaround for the current version:

// webpack.config.js
// ------------------------------------------------------------------------------

{
  resolve: {
    alias: {
        'botframework-connector$': require.resolve('./src/lib/botframework-connector')
    }
  }
}

// src/lib/botframewok-connector.js
// ------------------------------------------------------------------------------

// @flow

// Fixes broken webpack bundling in the package.
//
// See: https://github.com/microsoft/botbuilder-js/issues/818
//
// NB: at current date 2019-12-01, the issue has been incorrectly closed.

import formData from 'form-data'
import fetch from 'node-fetch'

global.FormData = formData
global.fetch = fetch

export * from 'botframework-connector/lib/auth'
export {
  ConnectorClient
} from 'botframework-connector/lib/connectorApi/connectorClient'
export {
  TokenApiClient,
  TokenApiModels
} from 'botframework-connector/lib/tokenApi/tokenApiClient'
export { EmulatorApiClient } from 'botframework-connector/lib/emulatorApiClient'
export * from 'botframework-connector/lib/tokenApi/models'
export * from 'botframework-connector/lib/teams'

Now I am getting

Error: Cannot find module './src/lib/botframework-connector'

@deepakmahakale try to rename the _src/lib/botframewok-connector.js_ to _src/lib/botframework-connector.js_