1

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

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

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

Cannot read properties of undefined (reading 'memoizedProperty')

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

エラー再現方法

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

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,
    },
  };
});


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

環境

NodeJSはバージョン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",
    "@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"
  }
}

nuxt.config.ts

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,
  },
});

public/global.js

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

試したこと

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

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

1 件の回答 1

0

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

7
  • コメントありがとうございます。 一ヶ月ほど前にAWS SDK v3を使用していましたが、Viteのビルド時にエラーが発生し表示が行えませんでした。記憶では、AWS SDK v3利用時はローカルの起動すらもできなかったように覚えています。
    – Buakaw
    Commented 2022年6月16日 4:22
  • aws-sdkのv3を仕様時にエラーが出なかったとのことですが、参考に具体的にどのような設定をされたのか伺えますか?Nuxt3の初期設定にAWS SDKv3を使用するとエラーになるはずです
    – Buakaw
    Commented 2022年6月16日 4:26
  • すみません、こちらはNuxtではなくvue3+viteの環境でした。
    – chimotaro
    Commented 2022年6月17日 5:17
  • お返事ありがとうございます。 Vue3とViteだとうまくいくんですね・・ではNuxt3+Viteに依存した問題の様子ですね...
    – Buakaw
    Commented 2022年6月18日 6:03
  • そうですね、awssdk2がviteのビルド時のrollupのなんちゃらに対応してないとか、そんな感じだったと思います。
    – chimotaro
    Commented 2022年6月19日 8:04

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。