Cannot read properties of undefined (reading 'memoizedProperty') when using aws-sdk(v2) on Nuxt3

We are developing web applications using Nxt3.

After loading aws-sdk(v2) in Nxt3,
The local yarn dev command successfully ran AWSSDK, but

nuxt generate & nuxt start command displays the browser console log.

Cannot read properties of undefined (reading 'memoizedProperty')

The output indicates that the AWSSDK cannot be run.
To deploy to CloudFlarePages, nuxt generate & & nuxt start must be communicated.

Running the following source code in plugins/awssdk.client.ts results in an error:
Interference with imported aws-sdk objects at least once will cause symptoms.

import AWS from "aws-sdk";
import_from "lodash";

export class AWSCognitoIdPoolClient {
  private region:string;
  private idPollId:string;
  private loginProvider:string;
  private maxRetryCount: number = 10;
  private retryCount:number = 0;

  constructor(args:{
    region:string;
    idPollId:string;
    loginProvider:string;
  }) {
    this.idPollId=args.idPollId;
    this.region = args.region;
    this.loginProvider=args.loginProvider;

    // FIXME: Error here!!Error when referring to AWS objects
    // FIXME: An error occurred here!! It sees that an error occurred when reference an AWS object
    AWS.config.region = this.region;
  }

  private getCredentials (args: {idToken:string}):Promise <{
    accessKeyId:string;
    secretAccessKey:string;
    sessionToken:string;
  }>{
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
      IdentityPoolId—this.idPollId,
      Logins: {
        this.loginProvider—args.idToken,
      },
    });
    return new Promise ((resolve)=>{
      (AWS?.config?.credentials as AWS.Credentials)?.get()=>
        resolve({
           accessKeyId:_.get(AWS, "config.credentials.accessKeyId"),
           secretAccessKey:_.get(AWS, "config.credentials.secretAccessKey"),
           sessionToken: _.get (AWS, "config.credentials.sessionToken"),
         })
       );
    });
  }

  public async getAwsCredentials (args: {idToken:string}): Promise <{
    accessKeyId:string | undefined;
    secretAccessKey:string | undefined;
    sessionToken:string | undefined;
  }>{
    return new Promise(async(resolve)=>{
      This.retryCount = 0;
      let accessKeyId = undefined;
      let secretAccessKey=undefined;
      let sessionToken=undefined;
      while(
        This.retryCount <this.maxRetryCount &
        [accessKeyId, secretAccessKey, sessionToken].every(v)=>_.isEmpty(v))
      ) {
        constres = wait this.getCredentials({idToken:args.idToken});
        accessKeyId=res.accessKeyId;
        secretAccessKey=res.secretAccessKey;
        sessionToken=res.sessionToken;
        this.retryCount++;
      }
      resolve({
        accessKeyId,
        secretAccessKey,
        sessionToken,
      });
    });
  }
}

export class AWSS3 Client {
  private region:string;
  private cognitoIdPoolClient:AWSCognitoIdPoolClient;

  constructor(args:{
    region:string;
    cognitoIdPoolClient:AWSCognitoIdPoolClient;
  }) {
    this.region = args.region;
    This.cognitoIdPoolClient=args.cognitoIdPoolClient;
  }

  private async putObjectToUserAssetBucket(args:{
    body —AWS.SNS.Binary | string;
    bucket:string;
    key:string;
    credentials —AWS.Credentials;
  }) {
    consts3 Client = new AWS.S3({
      apiVersion: "2006-03-01",
      credentials —args.credentials,
      region —This.region,
    });
    const params = {
      Body: args.body,
      Bucket: args.backet,
      Key —args.key,
    };
    return awnings3 Client.putObject(params).promise();
  }

  public async uploadToS3(args:{
    region?:string;
    idToken?:string;
    objectKey:string;
    bucketName:string;
    body:string | Blob;
  }) {
    const nuxtApp = useNuxtApp();
    const credentials = wait this.cognitoIdPoolClient.getAwsCredentials({
      idToken:
        args.idToken||
        ((
          wait nuxtApp.$auth.getIdTokenClaims()
        ?__raw as string),
    });
    wait this.putObjectToUserAssetBucket({
      key —args.objectKey,
      bucket —args.bucketName,
      body: args.body,
      credentials —credentials as AWS.Credentials,
    });
  }
}

export defaultdefineNuxtPlugin(async()=>{
  const config = useRuntimeConfig();
  const cognitoIdPoolClient=new AWSCognitoIdPoolClient({
    region:config.REGION,
    idPollId:config.COGNITO_ID_POOL_ID,
    loginProvider:config.AUTH0_DOMAIN,
  });
  US>return{
    provide: {
      awsS3 Client: new AWSS3 Client({
        region:config.REGION,
        cognitoIdPoolClient,
      }),
      cognitoIdPoolClient,
    },
  };
});

plThe same symptom always occurs when running AWSSDK outside of plugins folder

NodeJS uses version 16.13.2.

{
  "private"—true,
  "engines": {
    "node": ">=16.13.2"
  },
  "scripts": {
    "dev": "nuxt dev",
    "start": "nuxt start",
    "build": "nuxt build",
    "generate": "nuxt generate"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawsome/vue-fontawsome": "^3.0.0-5",
    "@graphql-codegen/cli": "^2.6.2",
    "@nuxt/types": "^2.15.8",
    "@pinia/nuxt": "^0.1.9",
    "@types/highlight.js": "^10.1.0",
    "@types/lodash": "^4.14.182",
    "@types/marked": "^4.0.3",
    "aws-amplify": "^4.3.24",
    "graphql": "^16.5.0",
    "nuxt": "^3.0.0-rc.3",
    "sass": "^1.52.1",
    "sass-loader": "10"
  },
  "dependencies": {
    "@apollo/client": "^3.6.6",
    "@auth0/auth0-spa-js": "^1.21.1",
    "@fortawsome/free-brands-svg-icons": "^6.1.1",
    "@fortawsome/free-solid-svg-icons": "^6.1.1",
    "@nuxt/webpack-builder": "^3.0.0-rc.3",
    "aws-appsync-auth-link": "^3.0.7",
    "aws-appsync-subscription-link": "^3.0.11",
    "aws-sdk": "^2.1149.0",
    "axios": "^0.27.2",
    "click-outside-vue3": "^4.0.1",
    "graphql-tag": "^2.12.6",
    "highlight.js": "^11.5.1",
    "lodash": "^4.17.21",
    marked: "^4.0.16",
    " moment": "^2.29.3",
    " moment-timezone": "^0.5.34",
    "pinia": "^2.0.14",
    "postprocessing": "^6.8.9",
    "three": "^0.114.0",
    "three.meshline": "^1.3.0",
    "vue-apollo": "^3.1.0",
    "vue-content-loader": "^2.0.1",
    "vuetify": "^3.0.0-beta.2"
  }
}

import {defineNuxtConfig} from "nuxt";

export defaultDefineNuxtConfig({
  ssr —true,

  typescript: {
    strict —true,
  },

  app: {
    head: {
      titleTemplate: "%s|MyAPP",    
      script: [
        {
          src: "/global.js",
          body —true,
        },
      ],
    },
  },

  css: [
    "@/assets/scss/global.scss",
    "@fortawsome/fontawsome-svg-core/styles.css",
    "vuetify/lib/styles/main.sass",
    "highlight.js/styles/github-dark.css",
  ],

  alias: {
    // // https://github.com/nuxt/framework/issues/4325
    "@vue/devtools-api": "@vue/devtools-api",
  },

  modules: ["@pinia/nuxt",

  build: {
    transpile: [
      "veetify",
    ],
  },

  vite: {
    define: {
      "process.env.DEBUG"—true,
    },
    resolve: {
      alias: {
        "./runtimeConfig": "./runtimeConfig.browser",
      },
    },
  },

  env: {
    AUTH0_DOMAIN: process.env.AUTH0_DOMAIN,
    AUTH0_CLIENT_ID: process.env.AUTH0_CLIENT_ID,
    AUTH0_REDIRECT_URL: process.env.AUTH0_REDIRECT_URL,
    AUTH0_CUSTOM_NAMESPACE: process.env.AUTH0_CUSTOM_NAMESPACE,
    AUTH0_CONNECTION_NAME: process.env.AUTH0_CONNECTION_NAME,
    APPSYNC_GRAPHQL_ENDPOINT_URL: process.env.APPSYNC_GRAPHQL_ENDPOINT_URL,
    REGION: process.env.REGION,
    APPSYNC_GRAPHQL_API_KEY: process.env.APPSYNC_GRAPHQL_API_KEY,
    COGNITO_ID_POOL_ID: process.env.COGNITO_ID_POOL_ID,
  },

  publicRuntimeConfig: {
    AUTH0_DOMAIN: process.env.AUTH0_DOMAIN,
    AUTH0_CLIENT_ID: process.env.AUTH0_CLIENT_ID,
    AUTH0_REDIRECT_URL: process.env.AUTH0_REDIRECT_URL,
    AUTH0_CUSTOM_NAMESPACE: process.env.AUTH0_CUSTOM_NAMESPACE,
    AUTH0_CONNECTION_NAME: process.env.AUTH0_CONNECTION_NAME,
    APPSYNC_GRAPHQL_ENDPOINT_URL: process.env.APPSYNC_GRAPHQL_ENDPOINT_URL,
    REGION: process.env.REGION,
    APPSYNC_GRAPHQL_API_KEY: process.env.APPSYNC_GRAPHQL_API_KEY,
    COGNITO_ID_POOL_ID: process.env.COGNITO_ID_POOL_ID,
  },
});

var global=global||window;
var process=process||{
  env: {DEBUG: undefined},
  version —[ ],
};

I tried the following, but the symptom did not change.

Add aws-sdk to build.transfile in nuxt.config.ts
Set runtimeConfig to vite.resolve.alias in nuxt.config.ts
Install and load public/global.js (see public/global.js above for details)

aws vue.js amazon-s3 nuxt.js aws-sdk

2022-09-30 14:48

1 Answers

Have you tried v3 of aws-sdk?
I got the same error, but it got better after using v3.

2022-09-30 14:48

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656