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. https://github.com/aws/aws-sdk-js/issues/3673#issuecomment-959712809

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. https://github.com/aws/aws-sdk-js/issues/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.

[RanVaknin]

Since the v2 SDK is now on the road to deprecation, we don't have plans to add better ESM compatibility with bundlers. the solution here is to upgrade to v3.

Thank you, Ran~