Amplify unusable in Vue 3 (Vite) projects (depends on Node-specific code in @aws-sdk/credential-provider-node)

[ffxsam]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Vue

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

# Put output below this line


  System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M2
    Memory: 4.37 GB / 24.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/Library/Caches/fnm_multishells/4911_1661126868070/bin/node
    Yarn: 3.2.1 - ~/Library/Caches/fnm_multishells/4911_1661126868070/bin/yarn
    npm: 8.11.0 - ~/Library/Caches/fnm_multishells/4911_1661126868070/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Safari: 15.6.1
  npmPackages:
    @serverless-stack/cli: ^1.7.0 => 1.7.0 
    @serverless-stack/resources: ^1.7.0 => 1.7.0 
    @tsconfig/node16: ^1.0.3 => 1.0.3 
    @typescript-eslint/eslint-plugin: latest => 5.33.0 
    @typescript-eslint/parser: latest => 5.33.0 
    aws-cdk-lib: 2.32.0 => 2.32.0 
    eslint: ^8.22.0 => 8.22.0 
    eslint-plugin-vue: latest => 9.3.0 (8.7.1)
    learn-starter:  0.1.0 
    migrator:  1.0.0 
    site:  1.0.0 
    stub:  1.0.0 
    typescript: ^4.7.4 => 4.7.4 
    vitest: ^0.17.0 => 0.17.1 
  npmGlobalPackages:
    @gridsome/cli: 0.3.4
    corepack: 0.10.0
    npm: 8.11.0
    yarn: 1.22.19

Describe the bug

See issue vitejs/vite#9715

Amplify apparently has a deep dependency tree that eventually requires @aws-sdk/credential-provider-node. This is obviously not ideal, since Amplify is intended to be used in the browser.

Expected behavior

I would expect no Amplify dependencies to make Node-specific references.

Reproduction steps

Reproduction: https://github.com/ffxsam/repro-vite-amplify

1. yarn install
2. yarn build

Code Snippet

No response

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[abdallahshaban557]

Hi @ffxsam - we are investigating this now!

[kevinold]

Hi @ffxsam, I pulled down the repo and show that the solution referenced here: #9639 (comment) allows the app to build in both development and production. I've cloned your project and added the patches in the appropriate place kevinold/repro-vite-amplify@4d6b422

Does this resolve the issue for you?

[abdallahshaban557]

This issue has been resolved through the solution provided by @kevinold. We are working with the AWS SDK team to minimize the need for updating the Vite config even further throughout this year.

[ffxsam]

@kevinold @abdallahshaban557 Thank you both! 🙏

[ffxsam]

Just an update: this is my latest vite.config.ts to make our Vue 3 project work with Amplify (not the full config, just the relevant parts):

/// <reference types="vitest" />
import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  ...(process.env.NODE_ENV === 'development'
    ? {
      define: {
        global: {},
      },
    }
    : {}),
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      ...(process.env.NODE_ENV !== 'development'
        ? {
          './runtimeConfig': './runtimeConfig.browser', //fix production build
        }
        : {}),
    },
  },
});