JS Azure Blog Storage - Getting require error when running?

Question

I'm currently trying to get data from Azure Blob Storage in to my Flask application. By doing this, I'm using the JavaScript SDK v12 for Browser.

I run in to problems when running the code, and it says in the console:

Uncaught Error: Module name "@azure/storage-blob" has not been loaded yet for context: _. Use require([]) https://requirejs.org/docs/errors.html#notloaded at makeError (require.js:5) at Object.s [as require] (require.js:5) at requirejs (require.js:5) at java.js:1

The code (got a bit messed up with indents)

const { BlobServiceClient } = require("@azure/storage-blob");

const containerName = "danicontainer";
const blobName = "Blobname foo";
const connStr = "ConnectionString foo";

const blobServiceClient = BlobServiceClient.fromConnectionString(connStr);

async function main() {
   const containerClient = blobServiceClient.getContainerClient(containerName);
   const blobClient = containerClient.getBlobClient(blobName);

// Get blob content from position 0 to the end
// In browsers, get downloaded data by accessing downloadBlockBlobResponse.blobBody
   const downloadBlockBlobResponse = await blobClient.download();
   const downloaded = await blobToString(await downloadBlockBlobResponse.blobBody);
   console.log("Downloaded blob content", downloaded);

 // [Browsers only] A helper method used to convert a browser Blob into string.
async function blobToString(blob) {
const fileReader = new FileReader();
return new Promise((resolve, reject) => {
  fileReader.onloadend = (ev) => {
    resolve(ev.target.result);
  };
  fileReader.onerror = reject;
  fileReader.readAsText(blob);
  });
  }
   document.write("Finished!");
   document.write(downloaded);
  }

 main();
 console.log("Test");

Together with this, we have the require.js file as well as a html/python file for Flask.

user_15970233 · Answer

Try with these steps

1) Create a new text file called package.json. This file defines the Node.js project. Save this file in the blob-quickstart-v12 directory. Here is the contents of the file:

{
    "name": "blob-quickstart-v12",
    "version": "1.0.0",
    "description": "Use the @azure/storage-blob SDK version 12 to interact with Azure Blob storage",
    "main": "blob-quickstart-v12.js",
    "scripts": {
        "start": "node blob-quickstart-v12.js"
    },
    "author": "Your Name",
    "license": "MIT",
    "dependencies": {
        "@azure/storage-blob": "^12.0.0",
        "@types/dotenv": "^4.0.3",
        "dotenv": "^6.0.0"
    }
}

2) While still in the blob-quickstart-v12 directory, install the Azure Blob storage client library for JavaScript package by using the npm install command. This command reads the package.json file and installs the Azure Blob storage client library v12 for JavaScript package and all the libraries on which it depends.

npm install

3) Try this code to download blob

// Get blob content from position 0 to the end
// In Node.js, get downloaded data by accessing downloadBlockBlobResponse.readableStreamBody
// In browsers, get downloaded data by accessing downloadBlockBlobResponse.blobBody

const downloadBlockBlobResponse = await blockBlobClient.download(0);
console.log('
Downloaded blob content...');
console.log('	', await streamToString(downloadBlockBlobResponse.readableStreamBody));

For more details refer this document

JS Azure Blog Storage - Getting require error when running?

1 Answers