'Uncaught type error: t is not a constructor'

Question

I'm using aws-sdk in the Vite react js project.

The build is working fine.

In production return 'Uncaught type error: t is not a constructor' how to fix this? I have no idea about this.

I've tried this.

Here is my code:

import { S3, Endpoint } from 'aws-sdk';
// out 
const s3 = new S3({
  accessKeyId: import.meta.env.VITE_WASABI_ACCESS_KEY,
  secretAccessKey: import.meta.env.VITE_WASABI_SECRET_KEY,
  s3ForcePathStyle: true,
  endpoint: new Endpoint('https://s3.ap-northeast-2.wasabisys.com'),
});

// in component
  const handleUploadFile = async (
    file: File | string | undefined | null,
    type: 'identified' | 'deidentified',
  ): Promise<string> => {
    if (!file || typeof file === 'string') return file || '';
    if (!file?.type) return file.name;
    const [compFile, compExt] = await compress(file);
    const filename = fileName(file.name, compExt);
    const filePath = `subjects/${id}/${type}/${filename}`;
    const uploadParams = {
      Bucket: import.meta.env.VITE_WASABI_BUCKET_NAME,
      Key: filePath,
      Body: compFile,
      ACL: 'public-read',
    };
    const uploadRequest = s3.upload(uploadParams);
    return new Promise((res, rej) => {
      uploadRequest.on('httpUploadProgress', function (evt) {
        const progress = evt.loaded / (evt.total ?? Number.MAX_SAFE_INTEGER);
        if (progress < 1) {
          return toast.loading(
            <div className='flex flex-col gap-2'>
              <p className='text-xs'>Uploading {file.name}</p>
              <Progress progress={Math.ceil(progress * 100)} />
            </div>,
            { id: file.name },
          );
        }
        toast.success(<p className='text-xs'>Uploaded {file.name}</p>, { id: file.name });
      });

      uploadRequest.send(function (err, data) {
        if (err) {
          console.error('Error', err);
          rej(err.message || 'failed');
        }
        if (data) {
          res(filePath);
        }
      });
    });
  };

Import S3 spreading doesn't help

Vite config

import path from 'path';
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import react from '@vitejs/plugin-react';
import nodePolyfills from 'rollup-plugin-polyfill-node';
import { defineConfig } from 'vite';
import codegen from 'vite-plugin-graphql-codegen';
import pluginRewriteAll from 'vite-plugin-rewrite-all';
import svgr from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), svgr(), codegen(), pluginRewriteAll()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  optimizeDeps: {
    exclude: ['@jsquash/jpeg', '@jsquash/png', '@jsquash/webp', '@jsquash/resize'],
    esbuildOptions: {
      define: {
        global: 'globalThis'
      },
      plugins: [
        NodeGlobalsPolyfillPlugin({
          buffer: true,
          process: true,
        }),
      ],
    }
  },
  build: {
    rollupOptions: {
      plugins: [nodePolyfills()],
    },
  },
});

SOURCEMAP: default true in plugins.

sourcemap: true and spreading import both don't work

Answer 1

use s3 client

here is code:

import { S3Client } from '@aws-sdk/client-s3';

const s3Client = new S3Client({
  requestHandler: new XhrHttpHandler({}),
  region: 'ap-northeast-2', // Replace with your Wasabi region
  credentials: {
    accessKeyId: import.meta.env.VITE_WASABI_ACCESS_KEY, // Replace with your Wasabi access key
    secretAccessKey: import.meta.env.VITE_WASABI_SECRET_KEY, // Replace with your Wasabi secret key
  },
  endpoint: 'https://s3.ap-northeast-2.wasabisys.com', // Wasabi endpoint
});