aws-sdk-js doesn't work on sveltekit.

[higuuu]

Describe the bug

I want to use this sdk on sceltekit.
So I installed this sdk and import .svelte file.
But it doesn't work.

A error is appeared after I build and run it.

TypeError: e is not a constructor

However, it runs correctly only debug in 'npm run dev`.
I think it's related to Vite.

I tried that it's written by this comment but it doesn't work.
#3673 (comment)

Expected Behavior

If I import aws-sdk, I can use aws-sdk on sveltekit.

Current Behavior

A error is appeared after I build and run it.
However, it runs only debug by 'npm run dev`.

TypeError: e is not a constructor

However, it runs correctly only debug in 'npm run dev`.
I think it's related to Vite.

Reproduction Steps

1. create sveltekit project

node -v 18.16.0
create-svelte version 5.3.1

npm create svelte@latest [projectname]

• Which Svelte app template? › SvelteKit demo app
• Add type checking with TypeScript? › Yes, using TypeScript syntax

◆ Select additional options (use arrow keys/space bar)
│ ◼ Add ESLint for code linting
│ ◼ Add Prettier for code formatting
│ ◼ Add Playwright for browser testing
│ ◼ Add Vitest for unit testing

2. import AWS-SDK

• run npm install aws-sdk in the project

• import the library in routes/+page.svelte file. like bellow.

<script>
	import Counter from './Counter.svelte';
	import welcome from '$lib/images/svelte-welcome.webp';
	import welcome_fallback from '$lib/images/svelte-welcome.png';
	// add bellow
	import AWS from 'aws-sdk'; 
	console.log(AWS.config) 
</script>

3. Build & Preview

• run npm run build

• run npm run preview

• After watch the localhost url , you can watch this issue

Possible Solution

I found this issue and I tried to change vite config and svelte config like bellow.
#3673

But it doesn't work.

svelte.config.js

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: [vitePreprocess()],

	kit: {
		adapter: adapter({
			pages: 'build',
			assets: 'build',
			fallback: undefined,
			precompress: false,
			strict: true
		})
	},
	vite: {
    resolve: {
      alias: {
        './runtimeConfig': './runtimeConfig.browser',
      },
    },
  },
};

export default config;

vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
	plugins: [
		sveltekit()
	],
	optimizeDeps: {
		esbuildOptions: {
				// Node.js global to browser globalThis
				define: {
						global: 'globalThis',
				},
		},
	},
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser' // fix production build
    }
  },
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	}
});

Additional Information/Context

No response

SDK version used

"aws-sdk": "^2.1501.0"

Environment details (OS name and version, etc.)

node -v 18.16.0, create-svelte version 5.3.1, iOS 14.0

[hax]

I guess it's commonjs/esm compat problem, try console.log(AWS.default.config) ?

[higuuu]

I guess it's commonjs/esm compat problem, try console.log(AWS.default.config) ?

Maybe, is it console.log(AWS.config) ?
When I write console.log(AWS.default.config) , it shows ts error.
And, It doesn't work when I build and preview it.

Property 'default' does not exist on type 'typeof import("/Users/HiguchiShuya/v/test-svelte-kit/node_modules/aws-sdk/index")'.ts(

[RanVaknin]

Hi,
This seems like an issue with ESM compatibility. The v3 SDK was published to specifically address concerns of better compatibility with bundlers and tools that make use of ESM.

I have tested this using v3 and it's working correctly.

Will look into the issue with v2.

Thanks,
Ran~

[TomBrian]

For those still facing the issue. I had the same issue with Vite and Typescript. Switching from "aws-sdk" to @aws-sdk/client-s3" for S3Client and @aws-sdk/lib-storage for the upload method worked.

The "e is not a constructor" is an issue with the s3 import.