aws-sdk-js icon indicating copy to clipboard operation
aws-sdk-js copied to clipboard

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

Open higuuu opened this issue 2 years ago • 3 comments

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

スクリーンショット 2023-11-13 22 00 13

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

スクリーンショット 2023-11-13 22 00 13

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

  1. 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>

  1. 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

higuuu avatar Nov 21 '23 19:11 higuuu

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

hax avatar Dec 05 '23 11:12 hax

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(

higuuu avatar Dec 07 '23 19:12 higuuu

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~

RanVaknin avatar Jan 22 '24 18:01 RanVaknin

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.

TomBrian avatar Apr 25 '24 19:04 TomBrian

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~

RanVaknin avatar Jun 18 '24 18:06 RanVaknin