Estoy tratando de implementar el alojamiento de archivos S3 en wasabi usando los ejemplos de sus documentos . Si bien la configuración de credenciales con SharedIniFileCredentials funciona muy bien en Node, necesitaría usar la misma funcionalidad dentro del navegador.

Aquí, me sale el siguiente error

aws_sdk__WEBPACK_IMPORTED_MODULE_1___default(...).SharedIniFileCredentials no es un constructor

Este es mi código (que funciona muy bien dentro del nodo, pero arroja un error dentro de un componente React):

 import AWS from 'aws-sdk'; export const createS3Client = (): AWS.S3 => { const credentials = new AWS.SharedIniFileCredentials({ profile: 'wasabi' }); AWS.config.credentials = credentials; AWS.config.credentials.accessKeyId = process.env.NX_WASABI_KEY; AWS.config.credentials.secretAccessKey = process.env.NX_WASABI_SECRET; AWS.config.region = process.env.NX_WASABI_REGION; const ep = new AWS.Endpoint(process.env.NX_WASABI_ENDPOINT); const s3 = new AWS.S3({ endpoint: ep }); return s3; }; export const getFile = async (key: string): Promise<Buffer> => { const s3 = createS3Client(); const params = { Bucket: process.env.NX_WASABI_BUCKET, Key: key, }; const data = await s3.getObject(params).promise(); return data.Body as Buffer; };

La razón principal por la que intento hacer esto es porque quiero cargar imágenes almacenadas dentro de un depósito que no están disponibles públicamente en un componente FE (React).

Este es el componente en cuestión:

 import { useEffect, useState } from 'react'; import { getFile } from '../../lib/wasabi'; import Image from 'next/image'; import styles from './PaletteImage.module.scss'; interface Props { name: string; source: string; } const PaletteImage = ({ name, source }: Props) => { const [isLoading, setIsLoading] = useState(true); // component needs to load image data on mount const [error, setError] = useState<string>(); const [base64, setBase64] = useState<string>(); useEffect(() => { const parseImage = async () => { try { const buffer = await getFile(source); setBase64(buffer.toString('base64')); } catch (e) { setError(e.message); } finally { setIsLoading(false); } }; parseImage(); }, []); return ( <div className={styles.imageContainer}> {isLoading ? ( 'loading' ) : error ? ( error ) : ( <Image alt={name} layout="fill" objectFit="contain" objectPosition="left top" src={`data:image/jpeg;base64, ${base64}`} /> )} </div> ); }; export default PaletteImage;

Gracias por la ayuda.