Amplify-js: AWS Amplify predictions gives - No Auth module registered in Amplify - error

[rpostulart]

this code

import logo from "./logo.svg";
import { useEffect } from "react";
import "./App.css";
import { AmplifyAuthenticator, AmplifySignOut } from "@aws-amplify/ui-react";

import Amplify from "@aws-amplify/core";
import Predictions, {
  AmazonAIPredictionsProvider,
} from "@aws-amplify/predictions";
import awsconfig from "./aws-exports";

Amplify.configure(awsconfig);

Amplify.register(Predictions);
//Amplify.addPluggable(new AmazonAIPredictionsProvider());
Predictions.addPluggable(new AmazonAIPredictionsProvider());
function App() {
  useEffect(() => {
    Predictions.identify({
      labels: {
        source: {
          S3Object: {
            Bucket: "swarovski61482523a3d849c6b5a2943c8b1e09a3120715-dev",
            Name: "huis.jpg",
          },
        },
        // projectVersionArn:
        //   "arn:aws:rekognition:eu-west-1:666139602712:project/Pandora/version/Pandora.2020-10-27T17.04.51/1603814691469",
        type: "ALL",
      },
    })
      .then((response) => {
        console.log(response);
        // const { labels } = response;
        // labels.forEach((object) => {
        //   const { name, boundingBoxes } = object;
        // });
      })
      .catch((err) => console.log({ err }));
  });

  return (
    <AmplifyAuthenticator>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    </AmplifyAuthenticator>
  );
}

export default App;

with this package

{
  "name": "predictions",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/core": "^3.8.5",
    "@aws-amplify/ui-react": "^0.2.30",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.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"
    ]
  }
}

This gives me a No Auth module registered in Amplify error

I already remove node modules and lock files and did reinstalls.

[wlee221]

Hi @rpostulart, thanks for reporting this issue!

To configure Amplify with modular imports, you must import and configure Auth:

import Amplify from '@aws-amplify/core';
import { Auth } from '@aws-amplify/auth';
import Predictions, { AmazonAIPredictionsProvider } from '@aws-amplify/predictions';

Amplify.configure(awsconfig);
Auth.configure(awsconfig);
Predictions.configure(awsconfig);
Predictions.addPluggable(new AmazonAIPredictionsProvider());

Note that Amplify.register is not needed here.

On a side note, we suggest that you use a global aws-amplify instead of using modular imports. This way, you only need to configure Amplify once: Amplify.configure(awsconfig). Unused code will be optimized by bundlers if tree shaking is enabled.

Please let us know if this resolves your issue and we can reopen this issue as needed.

[rpostulart]

I have also tried that and also the global aws-amplify is providing the same errors.

If I remove this code then it works:

javascript useEffect(() => { Predictions.identify({ labels: { source: { S3Object: { Bucket: "swarovski61482523a3d849c6b5a2943c8b1e09a3120715-dev", Name: "huis.jpg", }, }, // projectVersionArn: // "arn:aws:rekognition:eu-west-1:666139602712:project/Pandora/version/Pandora.2020-10-27T17.04.51/1603814691469", type: "ALL", }, }) .then((response) => { console.log(response); // const { labels } = response; // labels.forEach((object) => { // const { name, boundingBoxes } = object; // }); }) .catch((err) => console.log({ err })); });

[rpostulart]

@wlee221 can you re-open this issue?

[wlee221]

Apologies for closing it prematurely. I will try to repro this locally. Meanwhile, I see that your parameter is in a wrong format; it should be

Predictions.identify({
  labels: {
    source: {
      key: "huis.jpg", // this fetches public/huis.jpg on your configured bucket.
    },
    type: "ALL" 
  }
})

Bucket that you configured with Amplify will be used. We will update the documentation to clarify parameter structure.

[wlee221]

I was able to run the APIs locally with latest aws-amplify, so I suspect that this is something on the client side. Here's my sample app for reference.

Worth noting:

• how I configured Amplify: App.js
• how I called Predictions.identify: App.js
• I only installed aws-amplify: package.json
• The file is uploaded to public/ path on the s3 bucket.

I would make sure that 1) your Auth and Storage are configured correctly and 2) guest users have access to S3 and identifyLabel API call if you aren't using authentication.

[rpostulart]

Ok let me check tomorrow. I am making some changes to the core of the predictions packages in amplify-js so it supports custom labels api. Therefor I used other params

[rpostulart]

Strange, even when cloning your repo and add my backend, I receive the same error.
I also have removed auth and configured it manually again, still the same error.

[rpostulart]

Sorry, it had to do with running amplify-js locally.

I had not linked the whole framework but just predictions package