azure-sdk-for-js: Cannot use azure/storage-blob in the ReactJS app
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
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 22 (13 by maintainers)
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?
@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 😀)
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.
Hey @nastia723,
From your code, it seems to me that you’re importing
StorageSharedKeyCredentialwhich is meant to be used only for Node.js, not for browsers (differences-between-nodejs-and-browsers).After importing the
BlobServiceClientin 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 likeuploadbrowserdata-blobto upload data from the react apps.Or
Here is a small sample to upload and download data with
@azure/storage-blob,version - 12.0.2through 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)
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.
packageszip from the link provided above.azure-storage-blob-12.0.0-preview.5.tgzzip (this would be the equivalent storage-blob package)@azure/storage-blobpackage 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, doyarn add file:<path>/azure-storage-blob-12.0.0-preview.5.tgzI can also use @azure/storage-blob@10.5.0, since this bug was introduced in v12., right?