The export of ContainerSASPermissions from Azure Storage Blob is currently unavailable

I encountered an unusual import error:

./src/components/pages/DocumentationPage.tsx
Attempted import error: 'ContainerSASPermissions' is not exported from '@azure/storage-blob'.

The implementation in the azure documentation on GitHub can be found here: list-blobs-from-container-sas-token

I have already installed the package

"@azure/storage-blob": "^12.12.0"
as listed under dependencies in the package.json file.

You can verify in the screenshot that the package has been successfully downloaded locally.

Do I need to update my tsconfig.json or adjust a path?

Just for your information, this project is new, but other packages like @tanstack/react-query are working without any issues.

https://i.sstatic.net/qTSvr.png

Answer №1

After experimenting in my own setup, here are the findings:

If you need to generate a SAS token at the container level using Typescript, you can refer to this MS-DOCUMENT

Prior to running any code samples on Node, make sure to install the typescript compiler:

npm install -g typescript 

In order to work with azure-blob-storage and azure-identity packages:

 npm install @azure/storage-blob
 npm install @azure/identity

Sample Code (demo.ts):

import {BlobServiceClient,
ContainerSASPermissions,
generateBlobSASQueryParameters,
SASProtocol,ContainerClient} from "@azure/storage-blob";

import { DefaultAzureCredential } from "@azure/identity";

async  function  createContainerSas(){

// Obtain necessary environment variables
const  accountName = "venkat123";
const  containerName = "test";

const  TEN_MINUTES = 10 * 60 * 1000;
const  NOW = new  Date();
const  TEN_MINUTES_BEFORE_NOW = new  Date(NOW.valueOf() - TEN_MINUTES);
const  TEN_MINUTES_AFTER_NOW = new  Date(NOW.valueOf() + TEN_MINUTES);

// Utilize managed identity for enhanced security - DefaultAzureCredential

const  blobServiceClient = new  BlobServiceClient(
 `https://${accountName}.blob.core.windows.net`,
  new  DefaultAzureCredential()
);

// Ensure time-limited delegation key is used

// For user delegation key, container must already exist
const  userDelegationKey = await  blobServiceClient.getUserDelegationKey(
TEN_MINUTES_BEFORE_NOW,
TEN_MINUTES_AFTER_NOW
);
// Make use of time-limited SAS options
const  sasOptions = {
containerName,
permissions:  ContainerSASPermissions.parse("c"),
protocol:  SASProtocol.HttpsAndHttp,
startsOn:  TEN_MINUTES_BEFORE_NOW,
expiresOn:  TEN_MINUTES_AFTER_NOW
};
const  sasToken = generateBlobSASQueryParameters(
sasOptions,
userDelegationKey,
accountName
).toString();

console.log(`SAS token for blob container is: ${sasToken}`);
return  `${ContainerClient.url}?${sasToken}`;
}
createContainerSas()

Console Output:

To verify the SAS-token at container level, I ran the following command in the browser.

Command:

https://<account name>.blob.core.windows.net/test1?restype=container&comp=list&<SAS token>

Browser View:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Separating HTML content and text from a JSON response for versatile use within various sections of an Angular 2 application using Typescript

Hello there! I am currently utilizing Angular 2 on the frontend with a WordPress REST API backend. I'm receiving a JSON response from the service, however, the WP rest API sends the content with HTML tags and images embedded. I'm having trouble s ...

A valid status code is required for the POST request in TSOA Typescript. Please ensure it is a numerical

While exploring the possibilities of using tsoa for designing a rest API, I encountered an issue with the post request that always leads to the following error message: AssertionError [ERR_ASSERTION]: status code must be a number at Object.set statu ...

Redis is prepared and awaiting authorization for authentication. ReplyError: NOAUTH Authentication needed

When attempting to connect to a Redis instance hosted on redislab, an error message is received indicating Redis ready ReplyError: NOAUTH Authentication required. const pubClient = createClient({ url: `${config.redisLabHost}:${config.redisLabPort}` }); pub ...

Combining various outcomes into a single entity for ion-slide in Ionic 2

I am facing a similar issue with this problem, but with a different twist. I want to showcase three results in ion-slide, and while iDangero Swipper seems like a solution, I believe ion-slide could also achieve something similar to this. Please take a look ...

delayed updating of property not visible in angular 10 immediately

I needed to hide a div based on a condition, so I decided to use the hidden property like below: <div [hidden]="isControlDisplayed()?false:true"> The isControlDisplayed() method determines whether to show or hide the div based on the value ...

Cache items in a list that require a callback function

I am facing a challenge with a list of checkboxes that I display on my website. Every time I click on one checkbox, it is added or removed from a selection that I maintain. This process is handled by a callback function. The issue arises when the number of ...

Tips for delaying code execution until environment variables are fully loaded in Node.js/TypeScript/JavaScript

Purpose: ensure slack credentials are loaded into env vars prior to server launch. Here's my env.ts: import dotenv from "dotenv"; import path from "path"; import { loadAwsSecretToEnv } from "./awsSecretLoader"; const st ...

In the else-branch, a type guard of "not null" results in resolving to "never."

After creating a type guard that checks for strict equality with null: function isNotNull<T> (arg: T): arg is Exclude<T, null> { return arg !== null } Testing it showed that the then-branch successfully removes null from the type. const va ...

Typescript error: Unable to instantiate __WEBPACK_IMPORTED_MODULE_1_signature_pad__ as a constructor

Currently, I am working on a project using Angular2 and attempting to incorporate a JS library for signature input from https://github.com/szimek/signature_pad. In my code, I have tried utilizing the library in the following way: // .ts file import * as ...

What causes an array of type `never[] & number[]` to be generated when using `Object.assign`?

Take a look at this code snippet: const arr = [1,2,3] const res1 = arr.slice() const res2 = Object.assign([],arr) When using arr.slice() to create a shallow clone, the resulting array res1 will have a type of number[], just like the original arr. However, ...

The Tanstack react-table feature is limited in its ability to output tsx from the cell

Currently conducting a test on Tanstack react-table library using React and TypeScript. It appears that I am encountering an issue with returning tsx/jsx from the cell function of ColumnDef: https://i.sstatic.net/d5X3y.png Is there something crucial that ...

What is the best way to showcase two different arrays' data in a single Angular view?

I have 2 different arrays retrieved from an API with no common FK or any other identifier. Even though my TypeScript code produces the expected results, the view remains blank. The debugging results are provided as comments in the code snippet below: ngO ...

Utilize the Lifecycle Interface within Angular 2 framework for enhanced application development

Can you explain the impact of this rule? "use-lifecycle-interface": true, ...

What could be causing TypeScript to raise an issue when a /// reference comes after the 'use strict' statement?

This particular inquiry is somewhat connected to a question I posted on Stack Overflow yesterday about why TypeScript is encountering issues when trying to import a module. The initial configuration remains unchanged. My TypeScript file appears as follows ...

When object signatures match exactly, TypeScript issues a warning

I am facing an issue with typescript while trying to use my own custom type from express' types. When I attempt to pass 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>' as a parameter of type 'Context&a ...

Tips for resolving the error: finding the right loader for handling specific file types in React hooks

data = [{ img: '01d' }, { img: '02d' }] data && data.map((item) => ( <img src={require(`./icons/${item['img']}.svg`).default} /> )) I am facing an issue with the message Error: Module parse failed: U ...

Utilize the gsap ScrollTrigger in conjunction with React's useRef() and Typescript, encountering issues with type mism

Recently, I've been trying to add some animation to a simple React Component using the GreenSock ScrollTrigger plugin. However, I ran into an issue due to types mismatch in my Typescript project. Here's a snippet of the code: import React, {useRe ...

Special react-hook designed for dynamically assigning CSS classes

I'm currently exploring React's hooks and playing around with reusing the ability to add a shadow to an element (utilizing bootstrap as the css-framework). Here is the current structure of my App: export const App: React.FunctionComponent<IA ...

Encountered an issue in GoJS with Angular 4: ERROR TypeError: Unable to access property 'class' of null at Function.F.fromJson.F.fromJSON

I have just started exploring GoJS and decided to create a sample project by utilizing the Kanban sample available on the GoJs website. I attempted to use Angular and Typescript for this, but encountered an error. AppComponent.html:1 ERROR TypeError: Cann ...

Tips for modifying the text color of a div that is being iterated through using ngFor

I am facing an issue with a div that is being looped using ngFor. What I want to achieve is when a user clicks on one of the divs in the loop, only that particular div should change its text color. If another div is clicked, it should change color while th ...