AWS-sdk contributes to Build Error "Uncaught TypeError: e is not a constructor" in React Vite web app

Question

I built my vite react project and put it on AWS S3 to host it but when I go to link where my app is hosted, I get an error saying this "Uncaught TypeError: e is not a constructor".

I am expecting working app because when I start it on localhost it works fine, no errors.

When I built my app there is this warning in console:

dist/assets/scheduler.d9bfe9e3.js                    4.01 KiB / gzip: 1.74 KiB
dist/assets/stylis.1e89421e.js                       4.11 KiB / gzip: 1.91 KiB
dist/assets/react-toastify.d4dfb48a.js               15.35 KiB / gzip: 6.12 KiB
dist/assets/uncontrollable.fe32bd1b.js               1.00 KiB / gzip: 0.60 KiB
dist/assets/toposort.06b496d5.js                     1.07 KiB / gzip: 0.54 KiB
dist/assets/unfetch.7178bd8e.js                      1.04 KiB / gzip: 0.59 KiB
dist/assets/uuid.fbc3d34b.js                         0.86 KiB / gzip: 0.46 KiB
dist/assets/warning.2aff9e2b.js                      0.00 KiB / gzip: 0.02 KiB
dist/assets/which-typed-array.504ccc43.js            0.92 KiB / gzip: 0.51 KiB
dist/assets/url.a29b1d7d.js                          7.13 KiB / gzip: 2.62 KiB
dist/assets/index.4e68ab58.css                       0.72 KiB / gzip: 0.47 KiB
dist/assets/util.6abea906.js                         11.92 KiB / gzip: 4.21 KiB
dist/assets/react-toastify.cca67129.css              11.16 KiB / gzip: 2.21 KiB
dist/assets/yup.033aeec8.js                          25.49 KiB / gzip: 8.51 KiB
dist/assets/moment.9709ab41.js                       58.51 KiB / gzip: 18.92 KiB
dist/assets/@mui.a4dc0e77.js                         128.63 KiB / gzip: 39.70 KiB
dist/assets/bootstrap.a1a5b93f.css                   189.76 KiB / gzip: 26.72 KiB
dist/assets/react-dom.b5ed22df.js                    127.41 KiB / gzip: 40.87 KiB
dist/assets/aws-sdk.ec0776c4.js                      2938.11 KiB / gzip: 392.96 KiB

(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

After researching a lot of sites and trying a lot of possible fixes I finally figure it out, partially. The problem was that the "aws-sdk" module is too big and when I do "npm run build" the warning shows in the console that the one chunk is too big, bigger than 500 KiB. To get around that you need to import specific things from that module that you need and use it in your file.

Here is an example of my situation:

import { CognitoIdentityCredentials } from 'aws-sdk/global';
import { config } from 'aws-sdk/global';
import S3 from 'aws-sdk/clients/s3';

But now I got similar error "Uncaught TypeError: t is not a constructor" in aws-sdk file.

Answer 1

Seems like an issue I faced migrating a create react app (CRA) to Vite with aws-sdk V2. The issue seems to be that aws-sdk v2 if you include it in your package.json file is intended to be used as a nodeJS dependency, there are other ways to build it for the browser, but I needed to configure rollup to process it properly. Like you, my app worked on localhost with vite dev but failed in prod with a Uncaught TypeError: e is not a constructor.

To further troubleshoot the issue I enabled the source map (vite.config.ts). I recommend you do the same so you can get a more detailed error.:

  ... // other defineConfig options
  build: {
    ... // add you own options
    sourcemap: true,
  },

This pointed me to the following:

Uncaught TypeError: t is not a constructor
    at $dn (request.js:16:11)
    at _e (core.js:83:1)
    at credentials.js:1:11
    at index-8d39151f.js:1:24
    at index.tsx:55:4

Which lead me to (/node_modules/aws_sdk/lib/request.js):

var AWS = require('./core');
var AcceptorStateMachine = require('./state_machine');
var inherit = AWS.util.inherit;
var domain = AWS.util.domain;
var jmespath = require('jmespath');

// ...

var fsm = new AcceptorStateMachine();

The require statement here is not working as expected. Searching around I found a couple of issues and fixes listed in comments in the code below. My working vite.config.ts:

/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
  // https://github.com/vitejs/vite/issues/1973
  define: {
    ...(process.env.NODE_ENV === 'development' ? { global: 'window' } : {}),
  },
  server: {
    port: 3000,
  },
  resolve: {
    // https://github.com/aws-amplify/amplify-js/issues/9639    
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    },
  },
  plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts',
    coverage: {
      reporter: ['text', 'html'],
      exclude: ['node_modules/', 'src/setupTests.ts'],
    },
  },
  build: {
    outDir: 'build',
    sourcemap: true,
    commonjsOptions: {
      include: [/node_modules/],
      extensions: ['.js', '.cjs'],
      strictRequires: true,
      // https://stackoverflow.com/questions/62770883/how-to-include-both-import-and-require-statements-in-the-bundle-using-rollup
      transformMixedEsModules: true,
    },
  },
});

I'm not 100% sure you have the same issue as I did but I hope this helps the next person that finds it.

An alternative solution is mentioned here (sadly they didn't have a great explanation). They use aws sdk v3 for JS. And based on the docs it sounds like it has has better webpack and bundling support than V2.