search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.43k stars 2.13k forks source link

When upgrading amplify 5.3.6 to 6.3.4 I get NoBucket: Missing bucket name while accessing object when uploading with Storage #13495

Closed danielj-genesis closed 4 months ago

danielj-genesis commented 4 months ago

Before opening, please confirm:

JavaScript Framework

Vue

Amplify APIs

Authentication, Storage

Amplify Version

v6

Amplify Categories

storage

Backend

Amplify CLI

Environment information

``` # Put output below this line ``` System: OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish) CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900K Memory: 54.50 GB / 62.55 GB Container: Yes Shell: 5.1.16 - /bin/bash Binaries: Node: 16.20.2 - ~/.nvm/versions/node/v16.20.2/bin/node npm: 8.19.4 - ~/.nvm/versions/node/v16.20.2/bin/npm pnpm: 8.6.12 - ~/Documents/video-management/node_modules/.bin/pnpm Browsers: Chrome: 119.0.6045.159 npmPackages: @antfu/eslint-config: ^0.7.0 => 0.7.0 @aws-amplify/auth: ^6.3.4 => 6.3.4 @aws-amplify/storage: ^6.4.4 => 6.4.4 @aws-amplify/ui-vue: ^4.2.8 => 4.2.8 @aws-sdk/client-kendra: ^3.67.0 => 3.188.0 @cypress/vite-dev-server: ^2.2.2 => 2.2.3 @cypress/vue: ^3.1.0 => 3.1.2 @iconify/json: ^1.1.381 => 1.1.461 @intlify/vite-plugin-vue-i18n: ^2.4.0 => 2.5.0 @rollup/plugin-node-resolve: ^13.0.4 => 13.3.0 @stencil/core: 2.6.0 => 2.6.0 @types/nprogress: ^0.2.0 => 0.2.0 @typescript-eslint/eslint-plugin: ^4.28.5 => 4.33.0 @vitejs/plugin-vue: ^1.3.0 => 1.10.2 @vue/compiler-sfc: ^3.1.5 => 3.2.41 @vue/server-renderer: ^3.1.5 => 3.2.41 @vueuse/core: ^7.5.4 => 7.7.1 @vueuse/head: ^0.6.0 => 0.6.0 aws-amplify: 6.3.4 => 6.3.4 axios: ^0.25.0 => 0.25.0 chart.js: ^3.7.1 => 3.9.1 critters: ^0.0.10 => 0.0.10 cross-env: ^7.0.3 => 7.0.3 cypress: ^9.2.1 => 9.7.0 eslint: ^7.32.0 => 7.32.0 fabric: ^5.2.1 => 5.2.4 https-localhost: ^4.6.5 => 4.7.1 lodash: ^4.17.21 => 4.17.21 markdown-it-link-attributes: ^3.0.0 => 3.0.0 markdown-it-prism: ^2.1.8 => 2.3.0 moment: ^2.29.1 => 2.29.4 nprogress: ^0.2.0 => 0.2.0 pinia: ^2.0.8 => 2.0.23 pnpm: ^8.6.12 => 8.6.12 prism-theme-vars: ^0.2.2 => 0.2.4 typescript: ^4.3.5 => 4.8.4 video.js: ^7.17.0 => 7.20.3 videojs-markers: ^1.0.1 => 1.0.1 vite: ^2.4.4 => 2.9.15 vite-plugin-components: ^0.13.2 => 0.13.3 vite-plugin-icons: ^0.6.5 => 0.6.5 vite-plugin-md: ^0.10.0 => 0.10.0 vite-plugin-pages: ^0.31.0 => 0.31.0 vite-plugin-pwa: ^0.9.3 => 0.9.3 vite-plugin-vue-layouts: ^0.3.1 => 0.3.1 vite-plugin-windicss: ^1.2.7 => 1.8.8 vite-ssg: ^0.14.5 => 0.14.7 vue: ^3.2.26 => 3.2.41 vue-demi: ^0.11.2 => 0.11.4 vue-global-api: ^0.4.1 => 0.4.1 vue-i18n: ^9.1.7 => 9.2.2 vue-router: ^4.0.10 => 4.1.5 vue-tsc: ^0.2.2 => 0.2.3 zen-observable: github:abdonrd/zen-observable => 0.8.15 npmGlobalPackages: @aws-amplify/cli: 12.12.1 corepack: 0.17.0 npm: 8.19.4 pnpm: 8.15.8

Describe the bug

When migrating to amplify 6.x.x from 5.3.6 and using the new setup:

import amplifyconfig from '../amplifyconfiguration.json'
Amplify.configure(amplifyconfig)

and new upload:

      console.log('bucket: '+updatedFilename)
      try {
        const result = await uploadData({
          path: "public/"+updatedFilename, 
          data: file,
          options: {
            onProgress: ({ transferredBytes, totalBytes }) => {
              if (totalBytes) {
                console.log(Math.round((transferredBytes / totalBytes) * 100));
              }
              }
          }
        }).result;
        console.log("Succeeded: ", result);
      } catch (error) {
        console.log("Error : ", error);
      }

I get this error:

Error :  NoBucket: Missing bucket name while accessing object.
    at assertValidationError (http://localhost:3333/node_modules/.vite/deps/aws-amplify_storage.js?v=94d5e09c:3992:11)
    at resolveS3ConfigAndInput (http://localhost:3333/node_modules/.vite/deps/aws-amplify_storage.js?v=94d5e09c:4182:3)
    at async startUpload (http://localhost:3333/node_modules/.vite/deps/aws-amplify_storage.js?v=94d5e09c:5304:31)
    at async http://localhost:3333/node_modules/.vite/deps/aws-amplify_storage.js?v=94d5e09c:4035:22
    at async Proxy.uploadVideo (http://localhost:3333/src/stores/video.ts?t=1718285151690:114:24)

Expected behavior

Before updating to 6.3.4 the upload worked normally with the s3 bucket amplify was setup with.

Reproduction steps

Install amplify 5.3.6 setup auth+storage

Update to amplify 6.3.4 Setup the new config Modify upload to new uploadData()

Code Snippet

// Put your code below this line.
      console.log('bucket: '+updatedFilename)
      try {
        const result = await uploadData({
          path: "public/"+updatedFilename, 
          data: file,
          options: {
            onProgress: ({ transferredBytes, totalBytes }) => {
              if (totalBytes) {
                console.log(Math.round((transferredBytes / totalBytes) * 100));
              }
              }
          }
        }).result;
        console.log("Succeeded: ", result);
      } catch (error) {
        console.log("Error : ", error);
      }

Log output

``` // Put your logs below this line Error : NoBucket: Missing bucket name while accessing object. at assertValidationError (http://localhost:3333/node_modules/.vite/deps/aws-amplify_storage.js?v=94d5e09c:3992:11) at resolveS3ConfigAndInput (http://localhost:3333/node_modules/.vite/deps/aws-amplify_storage.js?v=94d5e09c:4182:3) at async startUpload (http://localhost:3333/node_modules/.vite/deps/aws-amplify_storage.js?v=94d5e09c:5304:31) at async http://localhost:3333/node_modules/.vite/deps/aws-amplify_storage.js?v=94d5e09c:4035:22 at async Proxy.uploadVideo (http://localhost:3333/src/stores/video.ts?t=1718285151690:114:24) ```

aws-exports.js


const awsmobile = {
    "aws_project_region": "xxxxxxxxxxxxxxxxxxxxxxxx",
    "aws_cognito_identity_pool_id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "aws_cognito_region": xxxxxxxxxxxxxxxxxxxxxxx",
    "aws_user_pools_id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "aws_user_pools_web_client_id": "xxxxxxxxxxxxxxxxxxxxxxxxx",
    "oauth": {},
    "aws_cognito_username_attributes": [
        "EMAIL"
    ],
    "aws_cognito_social_providers": [],
    "aws_cognito_signup_attributes": [
        "EMAIL"
    ],
    "aws_cognito_mfa_configuration": "OFF",
    "aws_cognito_mfa_types": [
        "SMS"
    ],
    "aws_cognito_password_protection_settings": {
        "passwordPolicyMinLength": 8,
        "passwordPolicyCharacters": [
            "REQUIRES_LOWERCASE",
            "REQUIRES_NUMBERS",
            "REQUIRES_SYMBOLS",
            "REQUIRES_UPPERCASE"
        ]
    },
    "aws_cognito_verification_mechanisms": [
        "EMAIL"
    ],
    "aws_appsync_graphqlEndpoint": "https://xxxxxxxxxxxxxxxxx/graphql",
    "aws_appsync_region": "xxxxxxxxxxxxxx",
    "aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS"
};

export default awsmobile;

Manual configuration

Not using manual anymore but the new amplifyconfiguration.json is the one I'm running Amplify.configure() with

{
  "aws_project_region": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "aws_cognito_identity_pool_id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "aws_cognito_region": "us-east-2",
  "aws_user_pools_id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "aws_user_pools_web_client_id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "oauth": {},
  "aws_cognito_username_attributes": [
    "EMAIL"
  ],
  "aws_cognito_social_providers": [],
  "aws_cognito_signup_attributes": [
    "EMAIL"
  ],
  "aws_cognito_mfa_configuration": "OFF",
  "aws_cognito_mfa_types": [
    "SMS"
  ],
  "aws_cognito_password_protection_settings": {
    "passwordPolicyMinLength": 8,
    "passwordPolicyCharacters": [
      "REQUIRES_LOWERCASE",
      "REQUIRES_NUMBERS",
      "REQUIRES_SYMBOLS",
      "REQUIRES_UPPERCASE"
    ]
  },
  "aws_cognito_verification_mechanisms": [
    "EMAIL"
  ],
  "aws_user_files_s3_bucket": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "aws_user_files_s3_bucket_region": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "aws_cloud_logic_custom": [
    {
      "name": "testUpload",
      "endpoint": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      "region": "xxxxxxxxxxxxx"
    }
  ]
}

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

jimblanc commented 4 months ago

@danielj-genesis Thank you for reaching out. It appears that there is a mismatch between the configuration files you provided in the ticket. Could you confirm that the one you're passing to the library contains the bucket information and that the bucket exists in your account? If so, could you check that the bucket information is present in the result of Amplify.getConfig() after configuration?

danielj-genesis commented 4 months ago

@jimblanc Yes the one actually being used right now is the amplifyconfiguration.json and the bucket exists, same one that was being used previously.

The only difference is that on version 5 I was configuring this way which worked:

import { Amplify as AmplifySingleton /* Hub */ } from '@aws-amplify/core'
// import { onAuthUIStateChange, AuthState } from '@aws-amplify/ui-components'
import {
  applyPolyfills,
  // defineCustomElements
} from '@aws-amplify/ui-components/loader'
import { defineCustomElements } from '@aws-amplify/ui-components/dist/components/index'

// @ts-expect-error missing types
import awsmobile from '../aws_exports.ts'
import { UserModule } from '~/types'
import { Amplify } from 'aws-amplify'
Amplify.configure({
  Storage: {
    bucket: 'xxxxxxxxx-staging',
    region: 'us-east-2' //REQUIRED -  Amazon S3 bucket
  }
})

export const install: UserModule = async (/* { app, router } */) => {
  // app.config.globalProperties.$amplifyAuthRequiredFields = amplifyAuthRequiredFields
  await AmplifySingleton.configure(awsmobile)
  await applyPolyfills()
  await defineCustomElements(window)

  // const authMessageChannel = 'UI Auth'
  // const noAuthMessage = 'user is undefined'

  // app.config.compilerOptions.isCustomElement = tag => tag.startsWith('amplify-')
}

checking with Amplify.getConfig() looks correct

jimblanc commented 4 months ago

@danielj-genesis Thanks for the clarification, just to be explicit the output of getConfig contains the correct value for Storage.S3.bucket

danielj-genesis commented 4 months ago

@jimblanc I double checked and yes it's the same bucket name we've been using and I can go into s3 and confirm the bucket exists on same region with previous data. The old way I configured it I set the bucket explicitly but still same bucket. image

jimblanc commented 4 months ago

@danielj-genesis Thank you for double checking. This error is thrown by the library when Storage.S3.bucket is undefined in the configuration before the upload begins, and I am unable to reproduce the issue using uploadData with Amplify JS 6.3.6. If you run getConfig() immediately before you call uploadData (in the same function), do you get the same result?

danielj-genesis commented 4 months ago

@jimblanc Okay interesting, I think this is the issue. By the time of upload the Storage config is gone: image

I wonder what could cause part of the config to be removed?

jimblanc commented 4 months ago

@danielj-genesis Now we're on to something! Are you calling configure in multiple places in your app?

danielj-genesis commented 4 months ago

@jimblanc Thank you! Okay I have this solved now. The reason was I was also using AmplifySingleton from before. Removing that makes it work.

jimblanc commented 4 months ago

@danielj-genesis Perfect, glad we got it sorted it!