Vite with aws-sdk build failed - Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')

Question

I got error below than I inspect the error found - AWS$6.STS.prototype Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')

It build successfully. And I can upload file to aws s3.

Charpoy

Please provide enough code so others can better understand or reproduce the problem. – Triumphant

I'm getting the same error, except the page doesn't load. This is on the Vite production build when I npm run build, doesn't happen on the dev server, so it must be related to the Rollup build. – Gaynor

I'm having the exact same issue during build - any updates? – Compassion

A quick solution is by replacing aws-sdk dependency with individual dependencies like @aws-sdk/client-s3. – Voluntary

Answer 1

Try adding this to your vite.config file:

export default defineConfig({
  build: {
    commonjsOptions: {
        strictRequires: ['node_modules/aws-sdk/**/*.js'],
    },
  }
})

Vite dev mode handles CommonJS imports differently than rollup. See https://github.com/rollup/plugins/tree/master/packages/commonjs

If you can, upgrade your aws-sdk version - the newer versions don't depend on CommonJS I believe. But if it's a dependency that's pulling in that old aws-sdk version (and you can't update the dependency to upgrade its aws-sdk version) then you might need to use the fix I shared above.

Southwestwards

Answer 2

This happens because the rollup version needs to be updated to v22 within vite.

For now there's a workaround:

export const updateCommonjsPlugin = (): Plugin => {
  const commonJs22 = commonjs({
    include: [/node_modules/],
    extensions: [".js", ".cjs"],
    strictRequires: true,
  });

  return {
    name: "new-common-js",
    options(rawOptions) {
      const plugins = Array.isArray(rawOptions.plugins)
        ? [...rawOptions.plugins]
        : rawOptions.plugins
        ? [rawOptions.plugins]
        : [];

      const index = plugins.findIndex(
        (plugin) => plugin && plugin.name === "commonjs"
      );
      if (index !== -1) {
        plugins.splice(index, 1, commonJs22);
      }

      const nextConfig = { ...rawOptions, plugins };
      return commonJs22.options.call(this, nextConfig);
    },
  };
};

And in vite.config.ts add it to the plugins

plugins: [updateCommonjsPlugin()],

More about this on this GH thread

Griffen