Azure-sdk-for-js: Building for browser as webpack library

[jis260]

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.

[ramya-rao-a]

Thanks for reporting @jis260

@XiaoningLiu, Can you take a first look at this?

[jis260]

Thanks for looking into this.
I also noticed that if you try to create a with ContainerClient()

You get an error too:
Clients.js:3709 Uncaught TypeError: _this.getContainerNameFromUrl is not a function

For the BlobServiceClient() it works as expected without any errors.

[jeremymeng]

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

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

[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.

[jis260]

Thank you @jeremymeng for helping - I can confirm that it all works for me.