I am developing the frontend component of an app for uploading file to Azure Blob Storage using React, JSX, and Vite. I am getting the error on the line:
import {
BlobServiceClient, StorageSharedKeyCredential
} from '@azure/storage-blob';
Error on console:
Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/@azure_storage-blob.js?v=450ffe39' does not provide an export named 'StorageSharedKeyCredential' (at Files.jsx:19:29)
I have tried deleting package-lock.json, running “npx rimraf ./**/node_modules”, and then run ‘npm install’ but it still didn’t work.Any help would be appreciated, thank you!
Hollow Dev is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
This is expected behavior.
For security reasons, client-side (front-end) applications (like React, Angular etc.) do not allow connecting to storage accounts using account key. The user of your application will be able to get the account key by looking at your application code in the browser and that would give them full access to your storage account.
You would need to use SAS tokens/Azure AD tokens to connect to your storage accounts from such applications.