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

[christiankaindl]

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.

[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.

[christiankaindl]

Thanks for your help @Magneticoz , really appreachiate it.

If I take your approach, then all modules seem to get configured but I get a 403 with response message "Missing Authentication Token" when calling API.post() (the call never reaches the Lambda function). Amplify logs a TypeError: "this._storage is undefined" error.
Here's the log output for API.post:

Note: Auth.currentAuthenticatedUser() and Auth.currentCredentials() return valid credentials.

---

When calling Storage.put I get a No credentials error:

Also note the AWSS3Provider - No Auth module registered warning. What could be the reason for Auth to not register? And why does Auth.currentAuthenticatedUser() work then?

[Magneticoz]

@christiankaindl, can you share your code for it? Both the configuration setup and the import to the certain component?

Because I have the same setup ( on Angular ) and it's working ( Auth, API & Storage ).

[ssk690]

@christiankaindl , I was having the same issue (on React). So tried deleting node_modules and did npm install and the problem was solved.

[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 <3