Building for browser as webpack library

I’m looking for guidance please on my issue building module, azure/storage-blob, for the browser environment.

My index.js is: const { BlobServiceClient, AnonymousCredential, ContainerClient, BlobClient, BlockBlobClient } = require("@azure/storage-blob"); export { BlobServiceClient, AnonymousCredential, ContainerClient, BlobClient, BlockBlobClient };

My webpack.config.js is: const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'azure-storage.js', library: 'azurestorage' } };

The build completes and in my html I can import the library and use: blobBlockClient = azurestorage.BlobClient("BlobEndpoint=...",<containerName>,<blobName>)

However, the following errors occurs. Clients.js:120 Uncaught TypeError: _this.getBlobAndContainerNamesFromUrl is not a function I’m not sure what is causing this and whether it is the way I am bundling?

I saw that is just to set the containerName and blobName so I manually edited the code to define them and move beyond this error. Then I discovered that the uploadBrowserData() method is not available under blobBlockClient.blobContext. I don’t see any upload methods available? Please see the attached image.

What am I doing wrong with building this as a library that can be imported? Thank you.

[jeremymeng]

Also updateBrowserData() is a function in BlockBlobClient so you should use new azurestorage.BlockBlobClient() instead.

blobBlockClient.blobContext is our internal construct that we use to make service calls.

[jeremymeng]

@jis260 you should use new with the constructor call. Could you please give it a try?

blobBlockClient = new azurestorage.BlobClient("BlobEndpoint=...",<containerName>,<blobName>)`