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を参照)