

Nuxt3を使用して、WEBアプリケーションを開発しています。

Nuxt3でaws-sdk(v2)を読み込んだところ、  
ローカルの`yarn dev`コマンドでは正常にAWSSDKの実行はできているのですが、

`nuxt generate && nuxt start`コマンドで表示を行うと、ブラウザのコンソールログに、

[code]

    Cannot read properties of undefined (reading 'memoizedProperty')
    
[/code]

が出力され、AWSSDKの実行ができません。  
CloudFlarePagesへデプロイする関係上、`nuxt generate && nuxt start`を疎通させる必要があります。

# エラー再現方法

以下のソースコードを、`plugins/awssdk.client.ts`で実行したところ、エラーになります。  
インポートしているaws-sdkのオブジェクトに、一度でも干渉すると現象が発生します。

[code]

    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: ここでエラー発生！！AWSオブジェクトを参照するとエラーになる様子
        // FIXME: An error occurred here! !! It seems that an error occurs when referencing 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))
          ) {
            const res = await this.getCredentials({ idToken: args.idToken });
            accessKeyId = res.accessKeyId;
            secretAccessKey = res.secretAccessKey;
            sessionToken = res.sessionToken;
            this.retryCount++;
          }
          resolve({
            accessKeyId,
            secretAccessKey,
            sessionToken,
          });
        });
      }
    }
    
    export class AWSS3Client {
      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;
      }) {
        const s3Client = new AWS.S3({
          apiVersion: "2006-03-01",
          credentials: args.credentials,
          region: this.region,
        });
        const params = {
          Body: args.body,
          Bucket: args.bucket,
          Key: args.key,
        };
        return await s3Client.putObject(params).promise();
      }
    
      public async uploadToS3(args: {
        region?: string;
        idToken?: string;
        objectKey: string;
        bucketName: string;
        body: string | Blob;
      }) {
        const nuxtApp = useNuxtApp();
        const credentials = await this.cognitoIdPoolClient.getAwsCredentials({
          idToken:
            args.idToken ||
            ((
              await nuxtApp.$auth.getIdTokenClaims()
            )?.__raw as string),
        });
        await this.putObjectToUserAssetBucket({
          key: args.objectKey,
          bucket: args.bucketName,
          body: args.body,
          credentials: credentials as AWS.Credentials,
        });
      }
    }
    
    export default defineNuxtPlugin(async () => {
      const config = useRuntimeConfig();
      const cognitoIdPoolClient = new AWSCognitoIdPoolClient({
        region: config.REGION,
        idPollId: config.COGNITO_ID_POOL_ID,
        loginProvider: config.AUTH0_DOMAIN,
      });
      return {
        provide: {
          awsS3Client: new AWSS3Client({
            region: config.REGION,
            cognitoIdPoolClient,
          }),
          cognitoIdPoolClient,
        },
      };
    });
    
    
    
[/code]

**※ pluginsフォルダー以外でのAWSSDK実行時も必ず同じ現象が発生**

# 環境

NodeJSはバージョン`16.13.2`を使用しています。

[code]

    {
      "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",
        "@fortawesome/vue-fontawesome": "^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",
        "@fortawesome/free-brands-svg-icons": "^6.1.1",
        "@fortawesome/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"
      }
    }
    
    
[/code]

# nuxt.config.ts

[code]

    import { defineNuxtConfig } from "nuxt";
    
    export default defineNuxtConfig({
      ssr: true,
    
      typescript: {
        strict: true,
      },
    
      app: {
        head: {
          titleTemplate: "%s | MyAPP",    
          script: [
            {
              src: "/global.js",
              body: true,
            },
          ],
        },
      },
    
      css: [
        "@/assets/scss/global.scss",
        "@fortawesome/fontawesome-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: [
          "vuetify",
        ],
      },
    
      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,
      },
    });
    
    
[/code]

# public/global.js

[code]

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

# 試したこと

以下試しましたが現象変わりませんでした。

  * nuxt.config.tsのbuild.transpileへaws-sdkを追加
  * nuxt.config.tsのvite.resolve.aliasへruntimeConfigを設定
  * public/global.jsを設置し読み込み（詳しくは前述のpublic/global.jsを参照）


CC BY-SA 4.0
2022-06-10T09:26:23.393
89318
2023-10-21T01:07:01.327
2022-06-10T09:32:40.513
35525
35525
question
aws vue.js amazon-s3 nuxt.js aws-sdk
Nuxt3で aws-sdk(v2) 使用時に Cannot read properties of undefined (reading 'memoizedProperty') が発生


aws-sdkのv3は試してみましたか？  
同じエラーが出てましたがv3使用したら治りました。


CC BY-SA 4.0
2022-06-15T03:27:03.833
89392
2022-06-15T03:27:03.833
53074
89318
answer