aws
Cannot read properties of undefined (reading'memoizedProperty') when using aws-sdk (v2) in Nuxt3
I am developing a web application using Nuxt3.
When I read aws-sdk (v2) with Nuxt3,
The AWS SDK can be executed normally with the local yarn dev command,
But If you display it with the nuxt generate && nuxt start command, it will be displayed in the console log of the browser.
Cannot read properties of undefined (reading'memoizedProperty')
Is output and the AWS SDK cannot be executed.
Since we are deploying to CloudFlarePages, we need to communicate nuxt generate && nuxt start.
Error reproduction method
When I run the following source code in plugins/awssdk.client.ts, I get an error.
If you interfere with the imported aws-sdk object even once, the phenomenon will occur.
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: An error occurred here! !! It seems that an error occurs when referencing an AWS object
// 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,
},
};;
});
** The same phenomenon always occurs when running the AWS SDK in a folder other than the plugins folder **
Environment
NodeJS is using 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",
"@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: {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: [],
};;
What I tried
I tried the following, but the phenomenon did not change.
- Added aws-sdk to build.transpile in nuxt.config.ts
- Set runtimeConfig in vite.resolve.alias in nuxt.config.ts
- Install and load public/global.js (see public/global.js above for details)
SDK version used
^2.964.0
Environment details (OS name and version, etc.)
OSX Monterey 12.4
Hi @riki-someya-ragate thanks for opening this issue, do you see similar errors with the latest version as well? I have seen couple of bundling issues with vite previously similar to https://github.com/aws/aws-sdk-js/issues/3673
@ajredniwja Thank you. I think this is a different issue from the issue your issue.
I think that your issue I think is a problem that Vite can not build when using aws-amplify. but I can build on vite but it output error on brower.
Cannot read properties of undefined (reading'memoizedProperty')
also The error content is different too.
I'm getting the same error as well. Build is fine, but this error Cannot read properties of undefined (reading'memoizedProperty') on the browser. However, I'm using React + Amplify + Vite. Been trying lots of solutions but none worked so far.
I've been using just Vite (with calls to aws-sdk, but only specifically for DynamoDB) and I'm also having this issue when building for production. Dev server works fine, but as soon as I build for production with it, it seems to not work.
Edit: exact error below
Uncaught TypeError: Cannot read properties of undefined (reading 'memoizedProperty')
at vendor.1119fdc2.js:260:32033
Edit 2: After messing around for quite a bit, it really does just seem to be resolved by removing any traces of the AWS SDK.
@justinfarrelldev so your solution was just to remove AWS Sdk from your codebase? I kind of need the libraries but I'm getting this same error when building in a svelte app
@justinfarrelldev so your solution was just to remove AWS Sdk from your codebase? I kind of need the libraries but I'm getting this same error when building in a svelte app
Yeah, I've switched to Firebase and all is now well. That was the only solution I found, unfortunately
@justinfarrelldev cool thanks for the quick reply. I'm already using AWS for a native app so not an option for me!
I only spent 2 hours playing with Svelte and got this on production build so I'll try the same on Next.JS and see if I get it or not. I think it's related to the Vite bundling
I only spent 2 hours playing with Svelte and got this on production build so I'll try the same on Next.JS and see if I get it or not. I think it's related to the Vite bundling
Best of luck! And definitely keep us all posted if you figure anything out
I have the same issue while using vite, please also keep me posted if having any progress.
Encountered the same issue, just using the aws-sdk and vite. As the build tools are different for production and the dev server it's practically impossible to debug too
Hello guys!
I was fighting with the same issue trying to use aws-sdk with nuxt3 around 2 days, because aws-sdk was mandatory in the client project. Finally, I solved it like this:
- I created a new plugin (in my case, I needed
S3) called s3.client.ts
import { useRuntimeConfig } from "#app";
import 'aws-sdk/dist/aws-sdk';
const AWS = window.AWS;
export default defineNuxtPlugin(() => {
const runtimeConfig = useRuntimeConfig();
const s3 = new AWS.S3({
accessKeyId: runtimeConfig.ACCESS_KEY_ID_S3,
secretAccessKey: runtimeConfig.SECRET_ACCESS_KEY,
httpOptions: { timeout: 100000 },
})
return {
provide: { s3 },
};
});
It's very important that plugin to be .client.
- To acces the plugin so:
const { $s3 } = useNuxtApp();
This code have to be called in mounted component event or wrapped in a function. Whit this implementation, the code will work in dev and production mode without issues.
onMounted(() => {
const runtimeConfig = useRuntimeConfig();
const { $s3 } = useNuxtApp();
const objParams = {
Bucket: runtimeConfig.BUCKET_S3_NAME,
Key: 'myfile.txt',
};
const url = $s3.getSignedUrl("getObject", objParams);
});
const handleUpload = () => {
const { $s3 } = useNuxtApp();
const runtimeConfig = useRuntimeConfig();
const objParams = {
Bucket: runtimeConfig.BUCKET_S3_SOURCE,
Key:'myfile.txt',
Body: file,
ContentType: file.type,
};
$s3.putObject(objParams)
}
In this way, aws-sdk will work in dev mode and production mode with nuxt3.
Regards.
