Webpack bundling broken

ballwood commented 5 years ago

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:

Bundle app using bot framework with webpack
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 commented 5 years ago

@juanar Any update on this?

gasper-az commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

@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 commented 4 years ago

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

ballwood commented 4 years ago

I don't know the issue just got closed randomly

ali-yolobe commented 4 years ago

@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 commented 4 years ago

Experiencing the same issue. Does anyone have a workaround?

ballwood commented 4 years ago

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

langri-sha commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

microsoft / botbuilder-js