By using AWS re:Post, you agree to the Terms of Use
/AWS Amplify/

Questions tagged with AWS Amplify

Sort by most recent
  • 1
  • 90 / page

Browse through the questions and answers listed below or filter and sort to narrow down your results.

Amplify Custom Subscription VTL

I am trying to provide multitenancy checks in a VTL that runs as part of a custom subscription. I am using the `@function` and `@aws_subscribe` annotations; the `@function` references an amplify function I added using `amplify add function`, naming it `perfectQueuePortalReceiveOrder` . Here are excerpts from my `schema.graphql`: ``` type ReceiveOrderResponse { brandSlug: String! @aws_iam @aws_cognito_user_pools(cognito_groups: ["perfectCoAdmin", "tablet"]) storeNumber: String! @aws_iam @aws_cognito_user_pools(cognito_groups: ["perfectCoAdmin", "tablet"]) orderDetails: String! @aws_iam @aws_cognito_user_pools(cognito_groups: ["perfectCoAdmin", "tablet"]) } type Mutation { receiveOrder(brandSlug: String!, storeNumber: String!, orderDetails: String!): ReceiveOrderResponse @function(name: "perfectQueuePortalReceiveOrder-${env}") @aws_iam @aws_cognito_user_pools(cognito_groups: ["perfectCoAdmin"]) } type Subscription { onReceiveOrder(brandSlug: String!, storeNumber: String!): ReceiveOrderResponse @aws_subscribe(mutations: ["receiveOrder"]) @aws_cognito_user_pools(cognito_groups: ["perfectCoAdmin", "tablet"]) } ``` The issue is that it does not appear that any VTL templates are generated for the Subscription. After issuing `amplify api gql-compile`, I see in the `build/resolvers` directory that VTL resolvers were generated both for the mutation, `Mutation.receiveOrder.res.vtl` as well as the lambda request/response templates: `InvokePerfectQueuePortalReceiveOrderLambdaDataSource.req.vtl` `InvokePerfectQueuePortalReceiveOrderLambdaDataSource.res.vtl`. However, _no_ `Subscription.onReceiveOrder.*` VTL template gets generated at all. My goal is simply to override the VTL template _only for the subscription_, in order to compare custom cognito user attributes against the arguments provided to the subscription, and give an unauthorized error if the arguments do not match the identity claims. But no VTL templates seem to get generated for the subscription; only for the mutation. How can I compare the arguments to a custom Subscription that is `@aws_subscribe`d to a custom Mutation, itself using `@function`, against the cognito-based identity claims provided in the $ctx during VTL processing for _the initiation of the subscription_? What is particularly confusing is that everywhere else I have used the `@aws_cognito_user_pools` and `@aws_iam` tags, the results have appeared in the build/resolvers VTL templates. _But not for subscriptions_. Why not? Strangely, these annotations _do_ seem to be honored, however, I cannot find any VTL code that implements that honoring, as I can with Queries and Mutations. Help?
0
answers
0
votes
15
views
asked 7 days ago

Restrict lambda resolver to owner for GraphQL API using Amplify

In my schema.graphql file I have the following model and mutation: ``` type Profile @model @auth(rules: [ { allow: private, operations: [read], provider: userPools }, { allow: owner, provider: userPools } ]) @aws_iam @aws_cognito_user_pools { id: ID! @primaryKey @auth(rules: [ { allow: owner, provider: userPools }, { allow: private, operations: [read], provider: userPools }, { allow: public, operations: [read], provider: iam } ]) name: String! @auth(rules: [ { allow: owner, provider: userPools }, { allow: private, operations: [read], provider: userPools }, { allow: public, operations: [read], provider: iam } ]) about: String links: [Link] @hasMany owner: String @index(name: "byOwner", queryField: "listProfileByOwner", sortKeyFields: ["name"]) } type Mutation { updateProfileLambda(profile: UpdateProfileLambdaInput): Profile @aws_cognito_user_pools @function(name: "UpdateProfile-${env}") } ``` I created the lambda function to perform custom validation before updating. The problem is that any authenticated user can update other user profiles. I thought adding `@aws_cognito_user_pools` would resolve this, but it doesn't. **Question**: What do I need to add to lock down the `updateProfileLambda` function so that it can only be successfully called by the owner of the Profile model? For some more context, I followed this tutorial to create the custom mutation lambda function: https://www.theclouddeveloper.io/use-lambda-resolvers-in-your-graph-ql-api-with-aws-amplify
0
answers
0
votes
16
views
asked 21 days ago

Simple Amplify Storage Requests Which Require Authentication

Hello, I am new to AWS, and I am using Amplify to build my application (React + Node). I am trying to make a very simple storage interface for user documents, and I don't want these documents to be accessible by those who do not sign in through the Cognito user pool. However, I do want these documents to be accessible to all users who have signed in through my application. I followed all of the directions specified in [the official documentation page regarding setup](https://docs.amplify.aws/lib/storage/getting-started/q/platform/js/#storage-with-amplify), and didn't configure any special options. I then went into the web interface for my S3 bucket, found the newly created storage bucket, and added a folder called "templates" with a couple sub folders, and then some user document templates. The problems started to occur upon calling the `Storage.list(...)` function within my application. The promise would resolve successfully, but the list would be empty. I understand now that's because my application was attempting to index the S3 bucket through a `public` scope prefix. When I create a folder named public, and add the files in there, everything works nicely. I was under the opinion though that using this public folder would allow my privileged content to be indexed to users who were not credentialed (i.e. guests from outside my application who didn't pass through the Cognito login portal). Is that the case? There are no groups configured from within my Cognito user pool. Right now, calling Amplify storage API functions work, but only in the `public` scope. I had thought what I wanted to do was only allow such functionality within the `private` scope; but I'm beginning to think based on the docs pages regarding user access that what I would be fine using the `public` scope, as it doesn't allow access to internal files by guests, who would not be signed in. This hunch is furthered by information regarding `protected` and `private` scopes being user-specific. Should I delve deeper into the permissions associated with these bucket objects, and configure some sort of user group system and then configure ACLs based on the groups, or would using files within the public scope be fine for my use case? I just don't want users who aren't signed in through Cognito to be able to access files. Thank you for your time, and I hope this question finds you well.
0
answers
0
votes
18
views
asked a month ago

NextJS app fails during Amplify CI/CD deployment

I have a NextJS app that uses SSR. Therefore manual deployment is not an option. I have setup Amplify hosting for the app. Deployment (initiated by GitHub push) fails due: ``` Must use import to load ES Module: /codebuild/output/.../src/aws-exports.js require() of ES modules is not supported. require() of /codebuild/output/src531993483/src/myidtoken/src/aws-exports.js from /snapshot/repo/build/node_modules/amplify-frontend-javascript/lib/frontend-config-creator.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename aws-exports.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /codebuild/output/src531993483/src/myidtoken/package.json. 2022-05-10T13:24:35.567Z [INFO]: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /codebuild/output/src531993483/src/myidtoken/src/aws-exports.js require() of ES modules is not supported. require() of /codebuild/output/src531993483/src/myidtoken/src/aws-exports.js from /snapshot/repo/build/node_modules/amplify-frontend-javascript/lib/frontend-config-creator.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename aws-exports.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /codebuild/output/src531993483/src/myidtoken/package.json. ``` I do not have aws-exports.js committed to GitHub. So aws-exports.js is generated during the build/deploy. Therefore I cannot rename it to `.csj`. I have tried though creating `my-aws-exports.js` and include that from my code. However, the error is still the same. This also sounds to me that the error is in generated code. Repository is not unfortunately public so I cannot share it. I'm using - react 17 - next 12 - aws-amplify 4.3.21 - aws-sdk 2.1131.0 `package.json` states ` "type": "module",`.
1
answers
0
votes
45
views
asked 2 months ago

I'd like to request to S3 as a cognito certification qualification.

I'd like to request to S3 as a cognito certification qualification. S3 is using sdk Cognito is using amplify. Use an angular typescript. I would like to replace the secret key with the cognito authentication information when creating S3. I want to access s3 with the user I received from Auth.signIn, but the credentials are missing. I need your help. ``` public signIn(user: IUser): Promise<any> { return Auth.signIn(user.email, user.password).then((user) => { AWS.config.region = 'ap-northeast-2'; AWS.config.credentials = new AWS.CognitoIdentityCredentials({ IdentityPoolId: 'ap-northeast-2:aaaaaaaa-bbbb-dddd-eeee-ffffffff', }); const userSession = Auth.userSession(user); const idToken = userSession['__zone_symbol__value']['idToken']['jwtToken']; AWS.config.region = 'ap-northeast-2'; AWS.config.credentials = new AWS.CognitoIdentityCredentials({ IdentityPoolId: 'ap-northeast-2:aaaaaaaa-bbbb-dddd-eeee-ffffffff', RoleArn: 'arn:aws:iam::111111111111:role/Cognito_role', Logins: { CognitoIdentityPool: 'ap-northeast-2:aaaaaaaa-bbbb-dddd-eeee-ffffffff', idToken: idToken, }, })); const s3 = new AWS.S3({ apiVersion: '2012-10-17', region: 'ap-northeast-2', params: { Bucket: 'Bucketname', }, }); s3.config.credentials.sessionToken = user.signInUserSession['accessToken']['jwtToken']; s3.listObjects(function (err, data) { if (err) { return alert( 'There was an error: ' + err.message ); } else { console.log('***********s3List***********', data); } }); } ``` bucket policy ``` { "Version": "2012-10-17", "Id": "Policy", "Statement": [ { "Sid": "AllowIPmix", "Effect": "Allow", "Principal": "*", "Action": "*", "Resource": "arn:aws:s3:::s3name/*", } ] } ``` cognito Role Policies - AmazonS3FullAccess ``` { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "s3:*", ], "Resource": "*" } ] } ```
0
answers
0
votes
7
views
asked 2 months ago

Storing/representing a hierarchical tree used for navigation within an Amplify web app and AppSync GraphQL API layer.

Hi, **TL;DR: Can anyone give a recommend approach to storing customisable n-level hierarchy trees for grouping and navigating results via a frontend Amplify-powered web app (using DynamoDB or any other database solution that can be mapped to AppSync ideally)?** **Some background** I'm building an multi-tenant IoT analytics solution that takes data from some sensors out in the field, uploads to AWS, processes this data and stores in a DynamoDB table (i.e. a very "standard" setup). I'm planning on adding a web frontend (built using Amplify and an AppSync GraphQL layer) that will allow users to navigate a **customisable, n-level** hierarchy tree of assets, in order to view the sensor data we've collected. Examples of valid hierarchies include: Country -> Site -> Building -> Floor -> Room -> Sensor (6-level) or Site -> Building -> Room -> Sensor (4-level) etc. The important thing here, is that this hierarchy tree can differ per customer, and needs to be customisable on a tenant-by-tenant basis, but we don't need to do any complex analysis or navigation of relationships between hierarchy levels (so, to me, something like Amazon Neptune or another graph database feels a bit overkill, but perhaps I’m wrong). My first thought was to try and build a hierarchical relationship inside of a DynamoDB table, possibly making use of a GSI to provide this, but in all of the examples I’ve seen online, the focus is very much on quick retrieval, but not so quick updating of hierarchy trees – now, whilst it’s unlikely that these tree structures would be updated on a regular basis, it is something we need to be able to support, so the idea of possibly updating ‘000s of rows in DynamoDB every time we want to make a change to the hierarchy tree for a given control area doesn’t seem quite right to me. Hence, my question above. I'm ideally looking for guidance on how to structure a DDB table to best support BOTH optimal retrieval of, and updates to, hierarchy trees in our application, but if DDB isn't the right answer here, then suggestions of alternatives would also be greatly appreciated. Many thanks in advance.
1
answers
0
votes
22
views
asked 2 months ago

/api/auth/login Lambda@Edge failing with "secret" is required on AWS Amplify

I am deploying next.js application with auth0 authentication onto AWS Amplify. This is working on localhost as expected. I created "Environment variables" with AUTH0_SECRET and others in the amplify App Settings, and I am able to authenticate and it is working fine. Suddenly after one of the deployment, I keep getting this error. I redeployed older version, error did not disappear. I believe it is not the app issue, it is something to do with Amplify settings as previous deployment also stopped working. Browser Error ``` 503 ERROR The request could not be satisfied. The Lambda function associated with the CloudFront distribution is invalid or doesn't have the required permissions. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner. If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation. ``` Logs: ``` ERROR Invoke Error { "errorType": "TypeError", "errorMessage": "\"secret\" is required", "stack": [ "TypeError: \"secret\" is required", " at Object.get (/var/task/node_modules/@auth0/nextjs-auth0/dist/auth0-session/get-config.js:147:15)", " at Object.getConfig (/var/task/node_modules/@auth0/nextjs-auth0/dist/config.js:66:38)", " at Object.initAuth0 (/var/task/node_modules/@auth0/nextjs-auth0/dist/index.js:22:23)", " at getInstance (/var/task/node_modules/@auth0/nextjs-auth0/dist/index.js:18:24)", " at handleAuth (/var/task/node_modules/@auth0/nextjs-auth0/dist/index.js:124:18)", " at Object.5862 (/var/task/pages/api/auth/[...auth0].js:214:129)", " at __webpack_require__ (/var/task/webpack-api-runtime.js:25:42)", " at Object.7416 (/var/task/pages/api/auth/[...auth0].js:189:23)", " at __webpack_require__ (/var/task/webpack-api-runtime.js:25:42)", " at __webpack_exec__ (/var/task/pages/api/auth/[...auth0].js:325:39)" ] } ``` for debugging, I printed the secret using console.log and I am able to see it. Reproduction my [...auth0].js ``` import { handleAuth } from '@auth0/nextjs-auth0'; console.log('the AUTH0_SECRET env var is set: ', !!process.env.AUTH0_SECRET); export default handleAuth(); ``` Environment Please provide the following: Version of this library used: "@auth0/auth0-react": "^1.9.0", "@auth0/nextjs-auth0": "^1.7.0", "axios": "^0.26.1", "jsonwebtoken": "^8.5.1", "next": "latest", "react": "17.0.2", "react-dom": "17.0.2", "react-is": "^18.0.0", "swr": "^1.3.0",
0
answers
0
votes
8
views
asked 2 months ago

How to pass the Amplify app ID to a function? How to do app introspection from backend functions?

## Background Amplify apps are easily extensible with Lambda functions, using `amplify add function`. Great! ## Problem How can I access the Amplify app ID from the Lambda function code? There are a lot of scenarios where I need that string in order to locate resources or access secrets in SSM. ## More generally How can my function do introspection on the app? How can I get the app ID from the Lambda function? Is there a service? Am I supposed to pass the information (somehow) through the CloudFormation template for the function? ## Due diligence I've spent days trying to figure this out, and I have at least learned the secret, undocumented way to get anything in a nested CloudFormation stack's outputs into the parameters for my CloudFormation stack, so that I can create environment variables that my Lambda function can see. That does not solve my original problem of finding the top-level app ID. Or any information about the top-level app. If I could find the stack name for the top-level CloudFormation for the stack then I could learn a lot of things. I can't. #### How to pass stack outputs from app resources into function stack parameters I've spent days trying to figure this out, and I have at least learned the secret, undocumented way to use `dependsOn` in the backend-config.json to get the outputs from the CloudFormation stacks for other resources in the Amplify app and feed those into the parameters for my stack for my function: ``` "function": { "MyFunctionName": { "build": true, "providerPlugin": "awscloudformation", "service": "Lambda", "dependsOn": [ { "category": "api", "resourceName": "Data", "attributes": [ "GraphQLAPIIdOutput" ] } ], } } } ``` That creates a new parameter for your function that's named using a pattern that's not documented anywhere, from what I can tell: `[category][resource name][CloudFormation stack output name]`. You can reference that in your CloudFormation stack for your function to create an environment variable that your function code can access: ``` { "AWSTemplateFormatVersion": "2010-09-09", "Parameters": { ... "secretsPathAmplifyAppId": { "Type": "String" } ... "Resources": { ... "Environment": { "Variables": { "AMPLIFY_APP_ID": { "Ref": "secretsPathAmplifyAppId" }, ``` #### Using the `AmplifyAppId` in `amplify-meta.json` doesn't work If I could access the `provider` / `cloudformation` data from a `dependsOn` then I could get the app ID into my function's stack. But that doesn't work. I spent some time eliminating that possibility. #### Using `secretsPathAmplifyAppId` There is a side effect of using amplify update function to add secrets. If you add any secret to the function then you will get a new parameter as an input to your function's CloudFormation stack: `secretsPathAmplifyAppId` I did that and added a dummy secret that I don't really need, in order to get that CloudFormation stack parameter containing the Amplify App ID that I do need. And then I referenced that in my CloudFormation template for my function: ``` { "AWSTemplateFormatVersion": "2010-09-09", "Parameters": { ... "env": { "Type": "String" }, "s3Key": { "Type": "String" }, ... "secretsPathAmplifyAppId": { "Type": "String" } ``` That works, right? **No!** If I create a new app in Amplify, perhaps deploying it to a staging or production account for the first time, then I'll get the error `Parameters: [secretsPathAmplifyAppId] must have values` from the initial build when I press "Save and Deploy" on the "Host your web app" form. This is because using `secretsPathAmplifyAppId` relies on the Amplify CLI adding the value to the `team-provider-info.json` file. For a new app's first deployment, "the `team-provider-info.json` file is not available in the Admin UI deployment job", as described in https://github.com/aws-amplify/amplify-cli/issues/8513 . And there is apparently no solution. ## WHY IS THIS SO HARD?!? The Amplify documentation implies that it's not difficult to add a Lambda function and do whatever. I'm a Lambda pro and a code pro, and I can do whatever. But only if I can pass context information to my code. How can an Amplify app's Lambda functions do introspection on the app?
1
answers
0
votes
9
views
asked 2 months ago

Possible to override default GraphQL @model resolvers with Lambda function resolvers?

I'm hoping to leverage a GraphQL model managed by Amplify / AppSync and build on that, using the DynamoDB table for storage but then adding my own custom business logic. In the current example, I want a model that represents a session for an external API, and I want to override the `create` mutation with a Lambda function that will call the external API to get an access token, and then add that token to the newly-created `@model` instance. I'm trying to do that by disabling the default `create` resolver and then adding my own in my GraphQL schema: ``` type ExternalAPISession @model(mutations: { create: null }) @auth(rules: [{allow: public}]) { id: ID! username: String! @index(name: "byUsername", queryField: "getExternalAPISessionByUsername") access_token: String! refresh_token: String! } type Mutation { createExternalAPISession(username: String, password: String): ExternalAPISession @function(name: "CreateExternalAPISession-${env}") } ``` But, even though I tried to disable the default `create` resolver, I still get this error when I try to `amplify push` this schema: ``` ⠹ Updating resources in the cloud. This may take a few minutes... Following resources failed Resource Name: MutationcreatePaytronixSessionResolver (AWS::AppSync::Resolver) Event Type: create Reason: Only one resolver is allowed per field. (Service: AWSAppSync; Status Code: 400; Error Code: BadRequestException; Request ID: 08399b17-1e38-46f6-bf9f-06f68356c21a; Proxy: null) ``` Is it even possible to do what I'm trying to do? I can't seem to find any explicit confirmation in the documentation that you can override a default CRUD action with your own Lambda function resolver. I see that you can override the default CRUD VTL templates with your own VTL. But can you override them with Lambda functions?
2
answers
0
votes
89
views
asked 2 months ago

enhanced subscription filtering connection error when using amplify-cli generated mutations

I am using amplify-cli with angular front-end. I have the following schema (schema.graphql): ``` type CardDeck @model @key(name: "byBoard", fields: ["boardId"], queryField: "cardDeckByBoardId") { id: ID! type: String! properties: [PropertyOrderTwo] boardId: ID! } type Subscription { onUpdateCardDeckByBoardId(boardId: ID!): CardDeck @aws_subscribe(mutations: "updateCardDeck") } ``` I added the following response mapping template to the subscription in the appSync console. ``` ## Response Mapping Template - onUpdateCardDeckByBoardId subscription $extensions.setSubscriptionFilter({ "filterGroup": [ { "filters" : [ { "fieldName" : "boardId", "operator" : "eq", "value" : "**** -> a valid board id" } ] } ] }) $util.toJson($context.result) ``` This results in the following connection error when subscribing to the listener in my app: ``` Connection failed: {"errors":[{"message":"Cannot return null for non-nullable type: 'ID' within parent 'CardDeck' (/onUpdateCardDeckByBoardId/id)"},{"message":"Cannot return null for non-nullable type: 'String' within parent 'CardDeck' (/onUpdateCardDeckByBoardId/type)"},{"message":"Cannot return null for non-nullable type: 'ID' within parent 'CardDeck' (/onUpdateCardDeckByBoardId/boardId)"},{"message":"Cannot return null for non-nullable type: 'AWSDateTime' within parent 'CardDeck' (/onUpdateCardDeckByBoardId/createdAt)"},{"message":"Cannot return null for non-nullable type: 'AWSDateTime' within parent 'CardDeck' (/onUpdateCardDeckByBoardId/updatedAt)"}]} ``` What am I doing wrong?
1
answers
0
votes
38
views
asked 2 months ago

How do I set up an AWS Amplify project to query an existing AWS AppSync API?

Hi, I am new to AWS Amplify and would like guidance on how to send a query to an ***existing*** GraphQL API on AWS AppSync. I am unsure how to start as a lot of Amplify coverage creates a *new* AppSync API using the Amplify CLI. ## Objectives * Set up a Node.js project to work with an existing AWS AppSync API, using AWS Amplify as the GraphQL client. * Send a single query to an existing AWS AppSync API. The query lists game results from a DynamoDB table and is called `listGames` in my GraphQL schema. * I need to repeat the query in order to fetch all available database records that satisfy the query. This would mean adding results to an array/object until the `nextToken` is `null` (i.e. no more records can be found for the query). ## Context * This application is deployed in an Amazon ECS container using AWS Fargate. * The ECS service is fronted by an Application Load Balancer (ALB). * A leader board web page fetches game results through a `POST` request to the ALB's DNS name / URL and adds them to a HTML table. ## Notes * For now, API key is my authentication method. I would soon like to switch to a task IAM role in ECS. * The ECS deployment described in 'Context' is working but it sends `POST` requests without AWS libraries. It is my understanding that I would need to use an AWS library in order to use an IAM role for AppSync authentication (used as a [task IAM role in ECS](https://docs.aws.amazon.com/AmazonECS/latest/developerguide/task-iam-roles.html)). Please correct me if I am mistaken. I would greatly appreciate any help you can give me. Thank you for your time!
1
answers
1
votes
96
views
asked 3 months ago

Amplify export infrastructures does not work with CDK V2

According to [Amplify documentation](https://docs.amplify.aws/cli/usage/export-to-cdk/) and [this official blog post](https://aws.amazon.com/blogs/mobile/export-amplify-backends-to-cdk-and-use-with-existing-deployment-pipelines/), it is possible to export infrastructures from Amplify then import into CDK. However, I try with CDK V2 and it does not work. I got error when installing **npm i @aws-amplify/cdk-exported-backend@latest**. CDK V2 **Construct** is not compatible with the **Construct** in aws-amplify/cdk-exported-backend, I think. So how to export Amplify infrastructure to CDK V2? Thank you! 1. Here is my package.json of CDK ``` { "name": "amplify-export-cdk", "version": "0.1.0", "bin": { "amplify-export-cdk": "bin/amplify-export-cdk.js" }, "scripts": { "build": "tsc", "watch": "tsc -w", "test": "jest", "cdk": "cdk" }, "devDependencies": { "@types/jest": "^26.0.10", "@types/node": "10.17.27", "jest": "^26.4.2", "ts-jest": "^26.2.0", "aws-cdk": "2.18.0", "ts-node": "^9.0.0", "typescript": "~3.9.7" }, "dependencies": { "aws-cdk-lib": "2.18.0", "constructs": "^10.0.0", "source-map-support": "^0.5.16" } } ``` 2. Here is errors when installing ``` npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: amplify-export-cdk@0.1.0 npm ERR! Found: constructs@10.0.108 npm ERR! node_modules/constructs npm ERR! constructs@"^10.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer constructs@"^3.2.27" from @aws-amplify/cdk-exported-backend@0.0.5 npm ERR! node_modules/@aws-amplify/cdk-exported-backend npm ERR! @aws-amplify/cdk-exported-backend@"0.0.5" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. ```
0
answers
1
votes
5
views
asked 3 months ago

AmplifyProvider generate a huge amount of warnings on import

I am getting a huge amount of warnings when I import AmplifyProvider. ``` WARNING in ./node_modules/@aws-amplify/ui/dist/esm/types/authenticator/user.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'D:\reactjs\amplify-work\node_modules\@aws-amplify\src\types\authenticator\user.ts' file: Error: ENOENT: no such file or directory, open 'D:\reactjs\amplify-work\node_modules\@aws-amplify\src\types\authenticator\user.ts' @ ./node_modules/@aws-amplify/ui/dist/esm/index.js 14:0-95 14:0-95 14:0-95 @ ./node_modules/@aws-amplify/ui-react/dist/esm/index.js 8:0-74 8:0-74 8:0-74 8:0-74 @ ./src/index.js 10:0-56 WARNING in ./node_modules/@aws-amplify/ui/dist/esm/validators/index.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'D:\reactjs\amplify-work\node_modules\@aws-amplify\src\validators\index.ts' file: Error: ENOENT: no such file or directory, open 'D:\reactjs\amplify-work\node_modules\@aws-amplify\src\validators\index.ts' @ ./node_modules/@aws-amplify/ui/dist/esm/machines/authenticator/actors/signIn.js 8:0-66 528:23-24 @ ./node_modules/@aws-amplify/ui/dist/esm/machines/authenticator/index.js 4:0-54 275:18-19 @ ./node_modules/@aws-amplify/ui/dist/esm/index.js 12:0-79 12:0-79 @ ./node_modules/@aws-amplify/ui-react/dist/esm/index.js 8:0-74 8:0-74 8:0-74 8:0-74 @ ./src/index.js 10:0-56 WARNING in src\index.js Line 5:8: 'Amplify' is defined but never used no-unused-vars Line 7:10: 'AmplifyProvider' is defined but never used no-unused-vars 1548 warnings have detailed information that is not shown. Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it. webpack 5.71.0 compiled with 1549 warnings in 513 ms ``` =============================================== Create standard: create-react-app Import: npm i @aws-amplify/ui-react aws-amplify File index.js ``` import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import Amplify from "aws-amplify"; import "@aws-amplify/ui-react/styles.css"; import { AmplifyProvider } from "@aws-amplify/ui-react"; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById("root") ); ``` File App.js ``` import "./App.css"; function App() { return ( <div className="App"> <header className="App-header"> <h1>Hello world</h1> </header> </div> ); } export default App; ``` package.json ``` { "name": "amplify-work", "version": "0.1.0", "private": true, "dependencies": { "@aws-amplify/ui-react": "^2.13.0", "@testing-library/jest-dom": "^5.16.3", "@testing-library/react": "^12.1.4", "@testing-library/user-event": "^13.5.0", "aws-amplify": "^4.3.18", "react": "^18.0.0", "react-dom": "^18.0.0", "react-scripts": "5.0.0", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } ```
1
answers
0
votes
62
views
asked 3 months ago
1
answers
0
votes
73
views
asked 3 months ago

Cloud 9 IDE Vue.js unable to preview browser on 8080

Environment: Using t3.small with resized EBS to 20GB; Connecting from: Mac OS (Safari or Chrome - current versions) Repro: ``` nvm install stable npm install -g @aws-amplify/cli # optional (unless testing `amplify run`) npm install vue npm install -g @vue/cli vue create testsite # use babel, router, lint; vue3 cd testsite npm run serve ``` At this point server is running normally with following message: App running at: - Local: http://localhost:8080/ - Network: http://xxx.xxx.xxx.xxx:8080/ However Cloud9 reports following error: Cloud9 Help You may be using the wrong PORT & IP for your server application. Try passing port 8080 to properly launch your application. We can continue installing Amplify to show it also fails with amplify run: ``` amplify configure # create or use existing amplify user passing appropriate key/secret ids amplify init # use defaults npm install aws-amplify @aws-amplify/ui-components amplify add auth # optional - I was trying to test drive Cognito; some code changes required, but not relevant for this test amplify push amplify run ``` Same result as with npm run serve. Reviewed following references, but did not find any working solutions: * https://docs.aws.amazon.com/cloud9/latest/user-guide/app-preview.html#app-preview-run-app * https://docs.aws.amazon.com/cloud9/latest/user-guide/troubleshooting.html#troubleshooting-app-preview * https://repost.aws/questions/QUyfyfFI92TO6lN6s6Ti-7Ig/can-no-longer-preview-running-applications-vfs-connection-does-not-exist * Note: In Chrome this seems to now be "SameParty cookies to be first-party" and in Safari disabling prevent cross-site tracking and block all cookies - neither worked for me When I had first started while following the initial Cloud 9 guide I was able to get the preview application to work while using the default t3.micro instance on Safari. After upgrading to t3.small it did not work any longer, though the t3.micro instance was failing in numerous other ways due to low memory, so this was not a viable setup. Following through the Cloud 9 instructions to create new environment instances I was unable to get any working Preview scenarios in any of the environments following various variations on the setup and sequencing of the vue3 and vue/cli installation. Any additional suggestions are appreciated.
0
answers
0
votes
10
views
asked 3 months ago
  • 1
  • 90 / page