Closed compulim closed 6 months ago
@stevengum DLJS is having issues when bumping Webpack from 4 to 5 (due to security vulnerability). Starting from webpack@5, the botframework-streaming
package is no longer working properly due to poor bundling/transpilation.
Assigning to @JuanAr for investigation.
@mrivera-ms in progress
Hi @mrivera-ms, @compulim.
We were able to reproduce the issue using the DL ASE
protocol with the 4.14.1
version of botbuilder
, where the bot doesn’t receive the attachment in the Activity
when sending a file.
Bumping the botbuilder
version in the deployed bot to the latest 4.15.0
, the bot started receiving the attachment through DL ASE
.
Bot sample with the reproduced the issue (with instructions): issue-3884.zip
To be able to test the DL ASE
protocol functionality, we followed these guides to configure our environment:
Closing. @compulim If you feel differently, please reopen.
Github issues should be used for bugs and feature requests. Use Stack Overflow for general "how-to" questions.
Versions
4.14.1
Describe the bug
The
botframework-streaming
is not configured/transpiled correctly to use in browser.To Reproduce
Steps to reproduce the behavior:
webpack@5
oresbuild
to consumebotframework-streaming
Expected behavior
It should able to upload a file.
Instead, due to
buffer
,process.nextTick()
, andstream
is not available fromwebpack@5
andesbuild
, the package will throw an exception.Due to development team structure and policies, customers may not have access to configurations of Webpack or esbuild. For example, in some customers' scenario, they are forbidden to "eject" the app from its scaffold/template. Thus, they would not have access to any configurations. SDK should work as by default and transpiled and bundled correctly.
Thus, the
botframework-streaming
package must not request the customer to change their project/host configuration to usebotframework-streaming
.Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
How to package correctly
Please look at the build scripts of
uuid
package on how they do packaging. They cover many scenarios including: CJS, ESM, browser-only (crypto
vs. Web Crypto). And the techniques they applied, should be sufficient forbotframework-streaming
package.Also read about
exports
field inpackage.json
.In short:
package.json/main
field should be ES5 and CommonJS (i.e. userequire()
to import packages)package.json/module
field should be ES5 and ES Module (i.e. useimport
statement)package.json/browser
field should only override certain files that does not work in browser./lib/abc.js
contains code that only works in Node.js but not browser, thepackage.json/browser
field should redirect to another file, such as,./lib/abc.browser.js
which will work in browsercrypto
vs. Web Crypto,ws
vs.WebSocket
,cross-fetch
vs.fetch
package.json/exports['.'].import
field should be same aspackage.json/module
fieldpackage.json/exports['.'].require
field should be same aspackage.json/main
fieldasync
or other post-ES5 features are used@babel/preset-env
to transpile to ES5@babel/transform-runtime
to polyfillcore-js@3
, it will limit the exposure of the polyfills only to code inside the packagePromise
interface, after loading this JS,window.Promise
must continue to beundefined
window.Promise
must continue to beundefined
How to test if the packaging is done correctly
Write
index.js
to consumebotframework-streaming
Create a new web app project
Create a new empty project root.
Run
npm init
to initialize the project.Run
npm install botframework-streaming
to install the package. (You can also installbotframework-streaming-*.tgz
for local testing).Bundle with
webpack@5
Install Webpack by running
npm install webpack@5
.Create
webpack.config.json
:Then, run
webpack
. It will produce output atdist/main*.js
.Write a HTML page to load the
dist/main*.js
file.Navigate to this page in all supported browsers (including mobile browsers). The code in
index.js
should run completely and successfully. For example, if the code inindex.js
contains file uploading logic, running the HTML page should upload a file.Bundle with
esbuild
Install
esbuild
by runningnpm install esbuild
Run
esbuild --bundle --outfile=dist/main-esbuild.js ./index.js
. It will produce an output file atdist/main-esbuild.js
.Write another HTML page to load the
dist/main-esbuild.js
file.Navigate to this page in all supported browsers (including mobile browsers). The code in
index.js
should run completely and successfully.Test using IE11
IE11 is an excellent tool for testing if the package is bundled/transpiled correctly. Using latest browsers also works, but it is not as trivial as loading the bundle in IE11.
Two criteria:
Pre-transpile or post-transpile
Currently, there is a trend of exporting ESnext code. ESnext code may not work in latest browsers.
Devs are slowly moving from pre-transpile to post-transpile.
For now, it's good to do pre-transpile. For the next 6-18 months, we may move to post-transpile. There are few advantages of post-tranpsile: