Core-http and potentially storage-blob do not work from web worker

• Package Name: core-http and possibly storage-blob
• Package Version: @azure/core-http@1.1.7, @azure/storage-blob@12.2.0-preview.1
• Operating system: macOS 10.15.6
• nodejs
  • version:
• browser
  • name/version: Chrome 85.0.4183.83
• typescript
  • version:
• Is the bug related to documentation in
  • README.md
  • source code documentation
  • SDK API docs on https://docs.microsoft.com

Describe the bug Unable to use @azure/storage-blob package in a context of web worker. Attempting to load it fails with error

Uncaught ReferenceError: document is not defined
    at Module../node_modules/@azure/core-http/es/src/util/xml.browser.js (xml.browser.ts:5)
    at __webpack_require__ (bootstrap:19)
    at Module../node_modules/@azure/core-http/es/src/policies/deserializationPolicy.js (deserializationPolicy.ts:1)
    at __webpack_require__ (bootstrap:19)
    at Module../node_modules/@azure/core-http/es/src/serviceClient.js (serviceClient.ts:1)
    at __webpack_require__ (bootstrap:19)
    at Module../node_modules/@azure/core-http/es/src/coreHttp.js (coreHttp.ts:1)
    at __webpack_require__ (bootstrap:19)
    at Module../node_modules/@azure/storage-blob/dist-esm/storage-blob/src/index.browser.js (index.browser.ts:1)
    at __webpack_require__ (bootstrap:19)

The cause of the issue is that document is not available inside WebWorkers.

To Reproduce

Steps to reproduce the behavior: I created a sample repo showcasing the issue https://github.com/Obi-Dann/azure-storage-blob-worker-issue based on Create React App

1. Clone the repository locally
2. Run yarn install
3. Run yarn start which will open a web browser eventually
4. Open browser devtools and observe the error

Expected behavior I should be able to use @azure/storage-blob package running it inside a web worker context.

Additional context I have a web worker process compressing images in background and then uploading them to Azure storage blob. I can only think of sending messages with file buffers/links to the main app from the worker in order to get the files uploaded, but that does not seem very maintainable in my case because the worker needs to do more work once the file is uploaded.

[Obi-Dann]

Thanks @salqueng! There’s also an issue with https://github.com/Azure/azure-sdk-for-js/blob/99f531906125f2d22a613957571a32ca792d009d/sdk/core/core-http/src/policies/msRestUserAgentPolicy.browser.ts#L21 which should be quite easy to fix by replacing window.navigator with self.navigator

[salqueng]

A workaround is below here. Import or place this code at the top of your web worker code. The idea is using 3rd party DOM parser library(xmldom), which is compatible with browser APIs, and mocking document and window.

import { DOMParser, DOMImplementation, XMLSerializer } from "xmldom";

self.DOMParser = DOMParser;
self.XMLSerializer = XMLSerializer;

self.document = {
  implementation: new DOMImplementation(),
};

self.window = {
  navigator,
};

There is a workaround, but I want to use @azure/storage-blob without any strange mocking and 3rd party library.