I'm trying to add existing backend to a new react frontend. Every time I call the API from react i get, Uncaught (in promise) API api3ceaf69c does not exist
Client side code
function getData() {
const apiName = "api3ceaf69c";
const path = "/users";
const myInit = {
headers: {},
};
return API.get(apiName, path, myInit);
}
(async function () {
const response = await getData();
console.log(JSON.stringify(response));
})();
index.js
import { Amplify, API } from "aws-amplify";
import awsExports from "./aws-exports";
Amplify.configure(awsExports);
API.configure(awsExports);
aws-exports.json
{
"aws_cloud_logic_custom": [
{
"name": "api3ceaf69c",
"endpoint": "https://xxxxxxx.execute-api.ap-south-1.amazonaws.com/dev",
"region": "ap-south-1"
}
]
}
"aws-amplify": "^4.3.27"
Error Error screenshot
I went through multiple answers around the same issue but none of them are working for me.
Interestingly this exact same code was working a few days back until I had to rebuild my backend due to some changes.
I figured out the problem finally! Issue was at the place where I'm calling Amplify.configure(aws_exports).
For some reason aws exports was not getting initialized in index.js file so I moved it closer to where I am actually calling the api, i.e. getData() function. It started working post that.
I thought client code used aws-exports.js to decide if the API exists. Looks like you may have checked it already. Does the xxxxxxx API from your exports file show up in the API Gateway in AWS Console? Can you invoke it from the console?