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.
Have you tried v3 of aws-sdk?
I got the same error, but it got better after using v3.
618 Uncaught (inpromise) Error on Electron: An object could not be cloned
613 GDB gets version error when attempting to debug with the Presense SDK (IDE)
915 When building Fast API+Uvicorn environment with PyInstaller, console=False results in an error
572 rails db:create error: Could not find mysql2-0.5.4 in any of the sources
© 2024 OneMinuteCode. All rights reserved.