Azure-sdk-for-js: [storage-blob 12 preview] Error using BlobServiceClient on production app

[ljgago]

• Package Name: @azure/storage-blob
• Package Version: 12.0.0-preview 1 and 2
• Operating system: Ubuntu 18.04
• [x] nodejs
  
  
  
  • version: 12.9.0
  
  
• [x] browser
  
  
  
  • name/version: Chrome Versión 76.0.3809.100
  
  
• [x] typescript
  
  
  
  • version: 3.5.3
  
  

Describe the bug
I am working with react and azure storage blob.
On build the project for production with yarn build and running this with a server, it show the next error:

tslib.es6.js:32 Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at Object.i (tslib.es6.js:32)
    at AppendBlobClient.js:24
    at Object.<anonymous> (AppendBlobClient.js:23)
    at i ((index):1)
    at Module.127 (main.a4e705eb.chunk.js:1)
    at i ((index):1)
    at Object.98 (main.a4e705eb.chunk.js:1)
    at i ((index):1)
    at a ((index):1)

This error ever show if you use BlobServiceClient() function and with this error you can't see the my react app.

If you run in dev mode with ´yarn start´ this error does not appear.

To Reproduce
Steps to reproduce the behavior:

1. Create a react APP with typescript (yarn create react-app my-app --typescript)
2. Add a simple function of azure storage blob in App.tsx

export const getBlobServiceClient = (): BlobServiceClient => {
  const uri = "" // the uri of azure service 
  const token = "" // the sas token
  const blobServiceClient = new BlobServiceClient(
    `${uri}?${token}`,
    new AnonymousCredential()
  )
  return blobServiceClient
}

1. Build for production with yarn build
2. Run a server: ´serve -s build´
3. Run a browser and open the server url
4. (if you run it in dev mode with yarn start this error does not show)

[kaerm]

Hi @ljgago thanks for using the preview libraries and reporting this issue. We will take a look at this!

[rschili]

Seems to be something with webpack, we are facing the same error right now. Excluding this module (and all of its dependencies) from webpack fixes the problem... But that's a bad option. Please investigate

[XiaoningLiu]

@ljgago Will v10 @azure/storage-blob package has this issue?
@HarshaNalluru Do you have time take a look?

[ljgago]

@XiaoningLiu the @azure/storage-blob V10 has not this issue.

[jeremymeng]

This may be related the circular references we have between the clients. It looks like the react app tries to load appendBlobClient.js first, while we have a specific loading order for the clients in index.js.

[HarshaNalluru]

I could repro the issue with both 12.0.0 preview 2 and preview 3 but not with V10.
Need to investigate further to figure out the root cause.

@jeremymeng, Tried reordering the exports in the index file similar to that of V10 and generated the storage-blob package tar zip. Didn't seem to have any effect, the error still persists.

[jeremymeng]

Simplified webpack repro: https://github.com/jeremymeng/webpacktest

[mrsufgi]

also happens in ts-node.

what I tried doing was appending '/dist' to import and override esm.
I broke down in @azure/core-http package

 "err"  : {
     "message"  :  "fetch is not a function" ,
     "name"  :  "TypeError" ,
     "stack"  :  "TypeError: fetch is not a function
    at NodeFetchHttpClient.<anonymous> (/bin/webpack:/home/circleci/circleci-deployment/node_modules/@azure/core-http/es/lib/nodeFetchHttpClient.js:25:1)
    at step (/bin/webpack:/home/circleci/circleci-deployment/node_modules/tslib/tslib.es6.js:97:1)
    at Object.next (/bin/webpack:/home/circleci/circleci-deployment/node_modules/tslib/tslib.es6.js:78:45)
    at /bin/webpack:/home/circleci/circleci-deployment/node_modules/tslib/tslib.es6.js:71:1
    at new Promise (<anonymous>)
    at Module.__awaiter (/bin/webpack:/home/circleci/circleci-deployment/node_modules/tslib/tslib.es6.js:67:1)
    at NodeFetchHttpClient.fetch (/bin/webpack:/home/circleci/circleci-deployment/node_modules/@azure/core-http/es/lib/nodeFetchHttpClient.js:23:33)
    at NodeFetchHttpClient.<anonymous> (/bin/webpack:/home/circleci/circleci-deployment/node_modules/@azure/core-http/es/lib/fetchHttpClient.js:104:1)
    at step (/bin/webpack:/home/circleci/circleci-deployment/node_modules/tslib/tslib.es6.js:97:1)
    at Object.next (/bin/webpack:/home/circleci/circleci-deployment/node_modules/tslib/tslib.es6.js:78:45)
    at fulfilled (/bin/webpack:/home/circleci/circleci-deployment/node_modules/tslib/tslib.es6.js:68:42)
    at processTicksAndRejections (internal/process/next_tick.js:81:5)" 
  },

it breaks since in the /dist file of preview -

it also imports the es module.
var coreHttp = require('@azure/core-http');
and not the dist.

In addition, in TS if you import the library to react, it also uses the esm and breaks when it tries importing 'fs'.

[HarshaNalluru]

@mrsufgi, Thanks for the comment.

We are still fixing the issue with webpack at our end(probably, caused by the circular references between the clients).

From your comment https://github.com/Azure/azure-sdk-for-js/issues/4890#issuecomment-534622008, It looks like you tried modifying the entry points and lost the links to core-http.
If that's not the case or in case you find any new problems other than the webpack issue that is mentioned here, I would encourage you to create a new issue in this repository.

[mrsufgi]

Yeah I figured, I ended up reverting to the current stable api:)

[msftbot[bot]]

Thanks for working with Microsoft on GitHub! Tell us how you feel about your experience using the reactions on this comment.

[ramya-rao-a]

The next update of the storage blob library will have the fix to this issue