API and Storage modules not registered when calling `Amplify.configure`

Describe the bug When using Amplify, I am unable to use Storage and API methods, and get respective errors (errors are below).

I am importing Amplify core package (@aws-amplify/core) and call the configure method like the following (code that is actually used):

import Amplify from '@aws-amplify/core'

Amplify.configure({
  Auth: {
    region: REGION,
    userPoolId: USER_POOL,
    identityPoolId: IDENTITY_POOL,
    userPoolWebClientId: USER_POOL_CLIENT
  },
  API: {
    endpoints: [
      {
        region: REGION,
        name: 'main',
        endpoint: API_ENDPOINT
      }
    ]
  },
  Storage: {
    AWSS3: {
      region: REGION,
      bucket: S3_BUCKET
    }
  }
})

Expected behavior The Storage and API modules should work as documented.

Desktop (please complete the following information):

• OS: Fedora 30 (Linux)
• Browser: Chrome 74

Package.json dependencies:

....
},
  "dependencies": {
    "@aws-amplify/api": "^1.0.36",
    "@aws-amplify/auth": "^1.2.25",
    "@aws-amplify/core": "^1.0.28",
    "@aws-amplify/storage": "^1.0.31",
    "@material-ui/core": "^3.9.3",
    "@reach/menu-button": "^0.1.18",
    "@reach/router": "^1.2.1",
    "@reach/tabs": "^0.1.6",
    "classcat": "^3.2.5",
    "draft-js": "^0.10.5",
    "prop-types": "^15.7.2",
    "query-string": "^6.7.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.1"
  },
...

Additional context React app, bundler is Parcel.

---

Log output: (the lines with Logging ... are from my code and log the Amplify object)

After that when my app imports the API module (@aws-amplify/api), using the post method, I get an API not configured error. When importing and calling Storage.put, the error becomes:

Uncaught (in promise) TypeError: No plugin found in Storage for the provider
Uncaught (in promise) TypeError: Cannot read property 'put' of undefined

I suspect the API and Storage modules aren’t registered, because they still give null when logged (the “BEFORE” and “AFTER” logs in the screenshot above). I reinstalled the node_modules multiple times already to have a clean install.

[christiankaindl]

Thanks for the help everyone! I got it working, here is a short summary:

The Request failed with the status code 403 error was caused by a wrong path on the API call:

API.post('main', '/getPosts'); // wrong
API.post('main', 'getPosts'); // Correct

The Auth problem was fixed by updating all packages again and deleting + reinstalling node_modules. Also tested to use the Amplify.configure method (as I originally did) to configure the modules instead of doing them individually and it also works:

Amplify.configure({
  Auth: {
    region: REGION,
    userPoolId: USER_POOL,
    identityPoolId: IDENTITY_POOL,
    userPoolWebClientId: USER_POOL_CLIENT
  },
  API: {
    endpoints: [
      {
        region: REGION,
        name: 'main',
        endpoint: API_ENDPOINT
      }
    ]
  },
  Storage: {
    AWSS3: {
      region: REGION,
      bucket: S3_BUCKET
    }
  }
})

I updated the packages a week ago, and now again two days ago. Otherwise I have no idea what else fixed it ¯_(ツ)_/¯

Many thanks for your help @Magneticoz and @ssk690 ❤️

[Magneticoz]

@christiankaindl, I just had the same problem. I’ve solved it on the way that I’ve separated configuration in my main.ts file.

So, instead of:

import Amplify from '@aws-amplify/core'

Amplify.configure({
  Auth: {
    region: REGION,
    userPoolId: USER_POOL,
    identityPoolId: IDENTITY_POOL,
    userPoolWebClientId: USER_POOL_CLIENT
  },
  API: {
    endpoints: [
      {
        region: REGION,
        name: 'main',
        endpoint: API_ENDPOINT
      }
    ]
  },
  Storage: {
    AWSS3: {
      region: REGION,
      bucket: S3_BUCKET
    }
  }
})

I did following:

import Storage from '@aws-amplify/storage';
import API from '@aws-amplify/api';
import Auth from '@aws-amplify/auth';

Auth.configure({
  Auth: {
    region: REGION,
    userPoolId: USER_POOL,
    identityPoolId: IDENTITY_POOL,
    userPoolWebClientId: USER_POOL_CLIENT
  }
});

API.configure({
  endpoints: [
    {
        region: REGION,
        name: 'main',
        endpoint: API_ENDPOINT
    }
  ]
});

Storage.configure(
  {
    AWSS3: {
      region: REGION,
      bucket: S3_BUCKET
    }
  }
);

Not sure if this is the best way of resolving it, but it did help in my case.