Cannot use azure/storage-blob in the ReactJS app

[leonbrag]

Version: "@azure/storage-blob": "^12.0.0-preview.5",

Neither of two lines below work in ReactJS app (created using Create React App):

import * as AzureStorageBlob from "@azure/storage-blob";
const AzureStorageBlob = require("@azure/storage-blob");

Following error is reported:

TypeError: The "original" argument must be of type Function at Object.promisify (d:\Work\JavaScript\RampUp\node_modules\node-libs-browser\node_modules\util\util.js:605:1) at Module.<anonymous> (d:\Work\JavaScript\RampUp\node_modules\@azure\storage-blob\dist-esm\src\utils\utils.node.js:198:1) at Module../node_modules/@azure/storage-blob/dist-esm/src/utils/utils.node.js (http://localhost:3000/static/js/1.chunk.js:29003:30) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at fn (http://localhost:3000/static/js/bundle.js:151:20) at Module../node_modules/@azure/storage-blob/dist-esm/src/BlobClient.js (d:\Work\JavaScript\RampUp\node_modules\@azure\storage-blob\dist-esm\src\BlobClient.js:1:1) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at fn (http://localhost:3000/static/js/bundle.js:151:20) at Module../node_modules/@azure/storage-blob/dist-esm/src/internal.js (d:\Work\JavaScript\RampUp\node_modules\@azure\storage-blob\dist-esm\src\internal.js:1:1) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at fn (http://localhost:3000/static/js/bundle.js:151:20) at Module../node_modules/@azure/storage-blob/dist-esm/src/ContainerClient.js (d:\Work\JavaScript\RampUp\node_modules\@azure\storage-blob\dist-esm\src\ContainerClient.js:1:1) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at fn (http://localhost:3000/static/js/bundle.js:151:20) at Module../node_modules/@azure/storage-blob/dist-esm/src/BlobServiceClient.js (d:\Work\JavaScript\RampUp\node_modules\@azure\storage-blob\dist-esm\src\BlobServiceClient.js:1:1) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at fn (http://localhost:3000/static/js/bundle.js:151:20) at Module../node_modules/@azure/storage-blob/dist-esm/src/index.browser.js (d:\Work\JavaScript\RampUp\node_modules\@azure\storage-blob\dist-esm\src\index.browser.js:1:1) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at fn (http://localhost:3000/static/js/bundle.js:151:20) at Module../src/js/RoleplayTable.js (http://localhost:3000/static/js/main.chunk.js:1218:77) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at fn (http://localhost:3000/static/js/bundle.js:151:20) at Module../src/js/RoleplayBackground.js (http://localhost:3000/static/js/main.chunk.js:862:75) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at fn (http://localhost:3000/static/js/bundle.js:151:20) at Module../src/js/RoleplayContent.js (http://localhost:3000/static/js/main.chunk.js:908:77) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at fn (http://localhost:3000/static/js/bundle.js:151:20) at Module../src/js/MainComponent.js (http://localhost:3000/static/js/main.chunk.js:325:74) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at fn (http://localhost:3000/static/js/bundle.js:151:20) at Module../src/js/App.js (http://localhost:3000/static/js/main.chunk.js:263:72) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at fn (http://localhost:3000/static/js/bundle.js:151:20) at Module../src/index.js (http://localhost:3000/static/js/main.chunk.js:177:65) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at fn (http://localhost:3000/static/js/bundle.js:151:20) at Object.0 (http://localhost:3000/static/js/main.chunk.js:2132:18) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at checkDeferredModules (http://localhost:3000/static/js/bundle.js:46:23) at Array.webpackJsonpCallback [as push] (http://localhost:3000/static/js/bundle.js:33:19) at http://localhost:3000/static/js/main.chunk.js:1:77

[bterlson]

Thanks for the report, and sorry for the troubles!

Closing this as a duplicate of #4890. Also the fix is at #5767, and currently under review!

[leonbrag]

Thank you, @bterlson

I appears https://github.com/Azure/azure-sdk-for-js/pull/5767 is not yet merged.

What should I do in the meanwhile to get it working? thanks

[bterlson]

If you're not yet ready for production, development builds work.

Otherwise, I'm not sure there's a good workaround short of building the library yourself. If you're up for that, there are fairly comprehensive instructions in CONTRIBUTING.md (that we'd love feedback on too 😁).

[bterlson]

I suppose you could also do the changes in #5767 directly in your node_modules folder as a temporary workaround (be careful not to do another npm install). Rather than editing the .ts files, you would edit the corresponding .js files under the dist-esm folder. You'd be moving the BlockBlobClient, AppendBlobClient and PageBlobClient classes into the BlobClient.js file, deleting internal.js, and replacing anything importing from internal.js to import from BlobClient.js instead.

[leonbrag]

I can also use @azure/storage-blob@10.5.0, since this bug was introduced in v12., right?

[leonbrag]

I guess not, the same error with

"@azure/storage-blob": "^10.5.0",

` 602 | var kCustomPromisifiedSymbol = typeof Symbol !== 'undefined' ? Symbol('util.promisify.custom') : undefined; 603 | 604 | exports.promisify = function promisify(original) {

605 | if (typeof original !== 'function') throw new TypeError('The "original" argument must be of type Function'); 606 | 607 | if (kCustomPromisifiedSymbol && original[kCustomPromisifiedSymbol]) { 608 | var fn = original[kCustomPromisifiedSymbol];`

[leonbrag]

Is there a NPM for dev builds to try?

[HarshaNalluru]

Hey @leonbrag,

The fix just got merged and the next release(this week) shouldn't have this issue. As a temporary solution for you, please try out the generated artifacts from the build that has fixed this issue.

Here's the link to the artifacts - https://dev.azure.com/azure-sdk/public/_build/results?buildId=170706&view=artifacts

Instructions to install the storage-blob package from the artifacts.

• Download the packages zip from the link provided above.
• Extract and find the azure-storage-blob-12.0.0-preview.5.tgz zip (this would be the equivalent storage-blob package)
• Move this to your project folder and install @azure/storage-blob package in your project. npm install <path>/azure-storage-blob-12.0.0-preview.5.tgz(Provide appropriate path of the .tgz file) In case you're using yarn, do yarn add file:<path>/azure-storage-blob-12.0.0-preview.5.tgz

[HarshaNalluru]

And thanks for letting us know that the issue is present in 10.5.0. We'll fix and release a patch for that soon.

For now, please try out the v12 fix and let me know if it is working for you.

[blockdev723]

Hello. I have one similar issue. I am using "@azure/storage-blob": "^12.0.2", in Reactjs.

"dependencies": { "@azure/storage-blob": "^12.0.2", "@babel/runtime": "^7.7.6", "@glidejs/glide": "^3.3.0",

By the way, I cannot fix the issue like attached image. If I declare this in Reactjs side. import { BlobServiceClient, StorageSharedKeyCredential } from '@azure/storage-blob'; Then the issue is detected.

Let me know the way how to fix it.

[HarshaNalluru]

/cc - @jeremymeng

[blockdev723]

Let me know how to fix it?

[HarshaNalluru]

Hey @nastia723,

From your code, it seems to me that you're importing StorageSharedKeyCredential which is meant to be used only for Node.js, not for browsers (differences-between-nodejs-and-browsers).

After importing the BlobServiceClient in your react app's js modules, try this code-sample-for-browsers-to-download-blob by providing the SAS token and other expected fields. You can leverage methods like uploadbrowserdata-blob to upload data from the react apps.

Or

Here is a small sample to upload and download data with @azure/storage-blob, version - 12.0.2 through react apps. - https://github.com/HarshaNalluru/sample-react-app-azure-storage-blob/commit/8f03c1fc5b29ec3d5ab38718167e91d585c30202

/cc- @bterlson @jeremymeng @ramya-rao-a (Let's add some react app samples)

[bterlson]

Agree we need some react samples!

@nastia723 can you say more about how you build your application? It seems like, in addition to what @HarshaNalluru observed, that you're also not using the browser versions of storage dependencies. See in the stack there is an entry for utils.node.js which should not be present if you are building for browser. I'd like to understand how this is happening!

[blockdev723]

Hello, HarshaNalluru! Thank you. By the way, Once I declare

import { BlobServiceClient } from '@azure/storage-blob';

then the same error occurs. https://user-images.githubusercontent.com/47790805/72686477-44e62f00-3b06-11ea-8e33-c2b443cac857.PNG

So I cannot import BlobServiceClient. What's the reason? But that works well in only Node project.

[HarshaNalluru]

@nastia723, You should be able to import BlobServiceClient to my understanding.

HarshaNalluru/sample-react-app-azure-storage-blob@8f03c1f

The above minimal sample to upload and download data with a react app is working fine for me.

If the above sample app didn't work for you, can you provide me with a minimal repro including the steps to build your application and other necessary details?
That would give us a better idea of how you are leading up to that error.

[blockdev723]

@nastia723, You should be able to import BlobServiceClient to my understanding.

HarshaNalluru/sample-react-app-azure-storage-blob@8f03c1f

The above minimal sample to upload and download data with a react app is working fine for me.

If the above sample app didn't work for you, can you provide me with a minimal repro including the steps to build your application and other necessary details? That would give us a better idea of how you are leading up to that error.

My project is Meteor + Reactjs. The import line is ok in Server side(node), but I cannot declare the import line in Client side (React code file) because of the util.promisify error. I look forward to hearing from you. I will make simple Meteor+React project including this line, and share with you. Thank you.

[bterlson]

@nastia723 looking forward to the repro! Fairly confident the issue is webpack (which is being used under the covers) is being told to bundle the node versions of our dependencies rather than the browser ones. Should be able to take a look at a repro and find out why, hopefully it's just some configuration that's missing (and we can document for anyone in the future following a similar path 😀)

[jeremymeng]

I created a Meteor + React sample by following the step-by-step tutorial at https://www.meteor.com/tutorials/react/components to the point where I can add a client UI under imports/ui. Then I use the storage code in the client https://github.com/jeremymeng/meteor-react-test/blob/master/imports/ui/App.js. I was able to retrieve container and blob information using the @azure/storage-blob package in the client code

@nastia723 I wonder what differences there are between my test project and yours. Could you please share your project when you get a chance?

[jeremymeng]

@nastia723 We just release a new version of the @azure/storage-blob package v12.1.0. Please give it a try and let us know whether it resolves the issue you are seeing.

[blockdev723]

Thanks so much, Bterlson, jeremymeng. I upgrade my Meteor from 1.8 to 1.9. Then that works. If there are any problems. I will ask for you. Thanks again.

[jeremymeng]

@nastia723 Glad to know that it works! I am closing this issue.