Hi, Before I raise my issue, excellent tutorial on Serverless (pity the serverless guys didn’t write something like this).
I am going through your tutorial and everything works upto the point listed in my heading.
even the npx aws-api-gateway-cli-test --username admin@example.com --password Passw0rd! … worked.
Now that I have created the React app, it falls over once I add the amplify stuff in (i have also added the login page code into the app, as that’s when we retry the app in the tutorial.
I do have a config.js:
export default {
s3: {
REGION: “eu-west-2”,
BUCKET: “din-notes-upload”
},
apiGateway: {
REGION: “eu-west-2”,
URL: “ht://hfo5keqtdf.execute-api.eu-west-2.amazonaws.com/prod” // i removed the tps so i can post here
},
cognito: {
REGION: “eu-west-2”,
USER_POOL_ID: " eu-west-2_ipJDuNI6q",
APP_CLIENT_ID: “40o6gfv9s8lv8d1osmm4a5ie2n”,
IDENTITY_POOL_ID: “eu-west-2:06923f5f-7caf-4b8c-a4f0-fdbd90015c84”
}
};
It is the exact one from my code, so you can test as well
But the react apps falls over on the browser. see error (it’s long but, i wanted to be complete):
Error displayed in the browser immediately after a compile:
Error: Invalid UserPoolId format.
new CognitoUserPool
F:/Code/SourceTreeCode/notes-app-client/node_modules/amazon-cognito-identity-js/es/CognitoUserPool.js:50
AuthClass.configure
F:/Code/SourceTreeCode/src/Auth.ts:174
171 | cognitoClientId: userPoolWebClientId, 172 | UserPoolId: userPoolId, 173 | domain: cognitoHostedUIConfig['domain'], > 174 | scopes: cognitoHostedUIConfig['scope'], | ^ 175 | redirectSignIn: cognitoHostedUIConfig['redirectSignIn'], 176 | redirectSignOut: cognitoHostedUIConfig['redirectSignOut'], 177 | responseType: cognitoHostedUIConfig['responseType'],View compiled
(anonymous function)
F:/Code/SourceTreeCode/src/Amplify.ts:52
49 | // if someone is using like Amplify.Auth 50 | Amplify.Auth = null; 51 | Amplify.Analytics = null;> 52 | Amplify.API = null; | ^ 53 | Amplify.Storage = null; 54 | Amplify.I18n = null; 55 | Amplify.Cache = null;View compiled
Function.Amplify.configure
F:/Code/SourceTreeCode/src/Amplify.ts:51
48 | // for backward compatibility to avoid breaking change 49 | // if someone is using like Amplify.Auth 50 | Amplify.Auth = null;> 51 | Amplify.Analytics = null; | ^ 52 | Amplify.API = null; 53 | Amplify.Storage = null; 54 | Amplify.I18n = null;View compiled
Module…/src/index.js
F:/Code/SourceTreeCode/notes-app-client/src/index.js:11
8 | import config from './config'; 9 | 10 | > 11 | Amplify.configure({ 12 | Auth: { 13 | mandatorySignIn: true, 14 | region: config.cognito.REGION,View compiled
webpack_require
F:/Code/SourceTreeCode/notes-app-client/webpack/bootstrap:784
781 | }; 782 | 783 | // Execute the module function> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 785 | 786 | // Flag the module as loaded 787 | module.l = true;View compiled
fn
F:/Code/SourceTreeCode/notes-app-client/webpack/bootstrap:150
147 | ); 148 | hotCurrentParents = []; 149 | }> 150 | return __webpack_require__(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return {View compiled
1
localhost:3000/static/js/main.chunk.js:1009:18
webpack_require
F:/Code/SourceTreeCode/notes-app-client/webpack/bootstrap:784
781 | }; 782 | 783 | // Execute the module function> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 785 | 786 | // Flag the module as loaded 787 | module.l = true;View compiled
checkDeferredModules
F:/Code/SourceTreeCode/notes-app-client/webpack/bootstrap:45
42 | } 43 | if(fulfilled) { 44 | deferredModules.splice(i--, 1);> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]); | ^ 46 | } 47 | } 48 |View compiled
Array.webpackJsonpCallback [as push]
F:/Code/SourceTreeCode/notes-app-client/webpack/bootstrap:32
29 | deferredModules.push.apply(deferredModules, executeModules || []); 30 | 31 | // run deferred modules when all chunks ready> 32 | return checkDeferredModules(); | ^ 33 | }; 34 | function checkDeferredModules() { 35 | var result;View compiled
(anonymous function)
://localhost:3000/static/js/main.chunk.js:1:85
It seems to be complaining about ‘scopes’ but I don’t know if its a red herring.
Could anyone help? I’m pretty much out of ideas at the moment.
node → v12.18.1
npm → 6.14.5
sls -version
Framework Core: 1.74.1
Plugin: 3.6.15
SDK: 2.3.1
Components: 2.31.12
package.json:
“dependencies”: {
“@testing-library/jest-dom”: “^4.2.4”,
“@testing-library/react”: “^9.5.0”,
“@testing-library/user-event”: “^7.2.1”,
“aws-amplify”: “^3.0.20”,
“react”: “^16.13.1”,
“react-bootstrap”: “^0.33.1”,
“react-dom”: “^16.13.1”,
“react-router-bootstrap”: “^0.25.0”,
“react-router-dom”: “^5.1.2”,
“react-scripts”: “3.4.1”
},
Running aws-api-gateway-cli-test (on windows, remove the ‘ps’ in invoke url to publish here):
npx aws-api-gateway-cli-test --username admin@example.com
–password Passw0rd!
–user-pool-id eu-west-2_ipJDuNI6q
–app-client-id 40o6gfv9s8lv8d1osmm4a5ie2n
–cognito-region eu-west-2
–identity-pool-id eu-west-2:06923f5f-7caf-4b8c-a4f0-fdbd90015c84
–invoke-url htt://hfo5keqtdf.execute-api.eu-west-2.amazonaws.com/prod
–api-gateway-region eu-west-2
–path-template /notes
–method POST
–body “{"content":"hello world","attachment":"hello.jpg"}”
produces:
npx: installed 106 in 21.117s
Authenticating with User Pool
Getting temporary credentials
Making API request
{
status: 200,
statusText: ‘OK’,
data: {
userId: ‘eu-west-2:d429f8d2-4960-4574-8d15-1a711e437d97’,
noteId: ‘c2ae1500-c414-11ea-a8c3-298658d0b7c2’,
content: ‘hello world’,
attachment: ‘hello.jpg’,
createdAt: 1594540403280
}
}
(difficult to get this post to respect tabs)
Regards
Den