Error: More than one or no providers are configured, Either specify a provider name or configure exactly one provider

JavaScript Framework

React

Amplify APIs

Predictions

Amplify Categories

predictions

Environment information

# Put output below this line
  System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 Intel(R) Xeon(R) CPU E5-1650 v2 @ 3.50GHz
    Memory: 25.01 GB / 31.93 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.44)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    @testing-library/jest-dom: ^5.15.0 => 5.15.0
    @testing-library/react: ^11.2.7 => 11.2.7
    @testing-library/user-event: ^12.8.3 => 12.8.3
    aws-amplify: ^4.3.5 => 4.3.5
    aws-amplify-react: ^5.1.6 => 5.1.6
    react: ^17.0.2 => 17.0.2 (16.14.0)
    react-dom: ^17.0.2 => 17.0.2
    react-scripts: 4.0.3 => 4.0.3
    web-vitals: ^1.1.2 => 1.1.2
  npmGlobalPackages:
    @aws-amplify/cli: 6.3.1
    serve: 13.0.2

Describe the bug

I followed a tutorial to create a web app with the language translation and text-to-speech functions. After running the command npm start, the web page (localhost:3000) is shown.

However, when clicked any button, an error occurred Error: More than one or no providers are configured, Either specify a provider name or configure exactly one provider.

Expected behavior

Expected a web app to be up and running. When the ‘Translate’ button is clicked, the typed text is translated into another language. When the ‘Text to speech’ button is clicked followed by the ‘Play’ button, a speech is played.

Reproduction steps

1. npx create-react-app my-app
2. amplify configure
3. amplify init (accepted the default options)
4. amplify add predictions

? Please select from of the below mentioned categories: Convert
? You need to add auth (Amazon Cognito) to your project in order to add storage for user files. Do you want to add auth now? Yes
? Do you want to use the default authentication and security configuration? Default configuration
? How do you want users to be able to sign in? Username
? Do you want to configure advanced settings? No, I am done.
? What would you like to convert? Translate text into a different language
? Provide a friendly name for your resource: translateText6c4601e3
? What is the source language? English
? What is the target language? Spanish
? Who should have access? Auth and Guest users

1. amplify add predictions

? Please select from of the below mentioned categories: Convert
? What would you like to convert? Generate speech audio from text
? Provide a friendly name for your resource: speechGeneratorb05d231c
? What is the source language? Mexican Spanish
? Select a speaker Mia - Female
? Who should have access? Auth and Guest users

1. amplify push

2. npm install aws-amplify aws-amplify-react

3. Replace the code in src/App.js with the following code:

import React, { useState } from 'react';
import './App.css';
import Amplify from 'aws-amplify';
import Predictions, { AmazonAIPredictionsProvider } from '@aws-amplify/predictions';
 
import awsconfig from './aws-exports';
 
Amplify.addPluggable(new AmazonAIPredictionsProvider());
Amplify.configure(awsconfig);
 
 
function TextTranslation() {
  const [response, setResponse] = useState("Input text to translate")
  const [textToTranslate, setTextToTranslate] = useState("write to translate");

  function translate() {
    Predictions.convert({
      translateText: {
        source: {
          text: textToTranslate,
          language : "en" // defaults configured in aws-exports.js
        },
        targetLanguage: "es"
      }
    }).then(result => setResponse(JSON.stringify(result, null, 2)))
      .catch(err => setResponse(JSON.stringify(err, null, 2)))
  }

  function setText(event) {
    setTextToTranslate(event.target.value);
  }

  return (
    <div className="Text">
      <div>
        <h3>Text Translation</h3>
        <input value={textToTranslate} onChange={setText}></input>
        <button onClick={translate}>Translate</button>
        <p>{response}</p>
      </div>
    </div>
  );
}
 
function TextToSpeech() {
  const [response, setResponse] = useState("...")
  const [textToGenerateSpeech, setTextToGenerateSpeech] = useState("write to speech");
  const [audioStream, setAudioStream] = useState();
  function generateTextToSpeech() {
    setResponse('Generating audio...');
    Predictions.convert({
      textToSpeech: {
        source: {
          text: textToGenerateSpeech,
          language: "es-MX" // default configured in aws-exports.js 
        },
        voiceId: "Mia"
      }
    }).then(result => {
      
      setAudioStream(result.speech.url);
      setResponse(`Generation completed, press play`);
    })
      .catch(err => setResponse(JSON.stringify(err, null, 2)))
  }

  function setText(event) {
    setTextToGenerateSpeech(event.target.value);
  }

  function play() {
    var audio = new Audio();
    audio.src = audioStream;
    audio.play();
  }
  return (
    <div className="Text">
      <div>
        <h3>Text To Speech</h3>
        <input value={textToGenerateSpeech} onChange={setText}></input>
        <button onClick={generateTextToSpeech}>Text to Speech</button>
        <h3>{response}</h3>
        <button onClick={play}>play</button>
      </div>
    </div>
  );
}
 
function App() {
  return (
    <div className="App">
      <TextTranslation />
      <hr />
      <TextToSpeech />
      <hr />
    </div>
  );
}
 
export default App;

1. npm start

[stocaaro]

@Yuanyuan-Shen Thank you for the easy to follow reproduction steps. I have mirrored your results and through debugging identified that the problem is with aws-amplify-react which has been replaced by @aws-amplify/ui-react. When aws-amplify-react is pulled into the project it is using older versions of other Amplify packages, which causes this error.

The above code isn’t depending on aws-amplify-react, so the easiest fix is to run through all the steps omitting that package, running npm install aws-amplify instead of npm install aws-amplify aws-amplify-react. I have confirmed that this works on my machine.

If your project depends on some of amplify’s react features, prefer upgrading to @aws-amplify/ui-react over using aws-amplify-react.

[github-actions[bot]]

This issue has been automatically locked since there hasn’t been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.