Amplify-js: Uncaught Error: More than one or no providers are configured

[24jr]

I'm trying to use text translation from amplify predictions in vue and while following docs I'm getting error

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

I do have other stuff going on which may be influencing issue such as analytics. Trying to just call as basic as possible to get working here. Also not sure if I'm posting this issue as I'm supposed or not this is my first time doing this.

```import Vue from "vue";
import "./plugins/vuetify";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./registerServiceWorker";
import Amplify, * as AmplifyModules from "aws-amplify";
import { AmplifyPlugin } from "aws-amplify-vue";
import awsmobile from "./aws-exports";
import Vuetify from "vuetify";
import Analytics from '@aws-amplify/analytics';
import Predictions, { AmazonAIPredictionsProvider } from '@aws-amplify/predictions';
Amplify.addPluggable(new AmazonAIPredictionsProvider());
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

Predictions.convert({
translateText: {
source: {
text: 'hello',
language : "en" // defaults configured on aws-exports.js
// supported languages https://docs.aws.amazon.com/translate/latest/dg/how-it-works.html#how-it-works-language-codes
},
targetLanguage: "fr"
}
}).then(result => console.log(JSON.stringify(result, null, 2)))
.catch(err => console.log(JSON.stringify(err, null, 2)))
Analytics.configure();
Analytics.autoTrack('session', {
enable: true,
attributes: {
attr: 'attr'
},
});
Analytics.autoTrack('pageView', {
enable: true,
eventName: 'pageView',
attributes: {
attr: 'attr'
},
type: 'SPA',
});
Amplify.configure(awsmobile);
Vue.use(AmplifyPlugin, AmplifyModules);
Vue.config.productionTip = false;
Vue.use(Vuetify, {
theme: {
primary: "#00f",
secondary: "#000",
}
}),
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
```

[elorzafe]

@24jr can you try adding the plugin after Amplify.configure?

[24jr]

same issue

import Predictions, { AmazonAIPredictionsProvider } from '@aws-amplify/predictions';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
Amplify.addPluggable(new AmazonAIPredictionsProvider());
  Predictions.convert({
  translateText: {
    source: {
      text: 'hello',
      language : "en" // defaults configured on aws-exports.js
      // supported languages https://docs.aws.amazon.com/translate/latest/dg/how-it-works.html#how-it-works-language-codes
    },
    targetLanguage: "fr"
    }
  }).then(result => console.log(JSON.stringify(result, null, 2)))
    .catch(err => console.log(JSON.stringify(err, null, 2)))

[elorzafe]

@24jr could be something with versions on your app. Can you paste your package.json?

I would try also cleaning node_modules and reinstalling all the packages in case there are different versions of Amplify installed on your app. Another thing you could try is doing Predictions.addPluggable instead of Amplify.addPluggable.

[24jr]

When I try Predictions.addPLuggable I get different error

Cannot read property 'translateText' of undefined

code like this

import Predictions, { AmazonAIPredictionsProvider } from '@aws-amplify/predictions';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
Predictions.addPluggable(new AmazonAIPredictionsProvider());
  Predictions.convert({
  translateText: {
    source: {
      text: 'hello',
      language : "en" // defaults configured on aws-exports.js
      // supported languages https://docs.aws.amazon.com/translate/latest/dg/how-it-works.html#how-it-works-language-codes
    },
    targetLanguage: "fr"
    }
  }).then(result => console.log(JSON.stringify(result, null, 2)))
    .catch(err => console.log(JSON.stringify(err, null, 2)))

and resources should be all set up. I think its for auth users only which im signed in anyway while doing this so don't think that is part of problem. I just updated everything a couple days ago. Unless I screwed up. I don't really know much about different versions of amplify being installed or a lot of this cleaning stuff still relatively new. This is package.json

{
  "name": "roze",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@aws-amplify/predictions": "^1.0.3",
    "aws-amplify": "^1.1.26",
    "aws-amplify-vue": "^0.2.9",
    "core-js": "^2.6.5",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuetify": "^1.5.18",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-eslint": "^3.7.0",
    "@vue/cli-plugin-pwa": "^3.7.0",
    "@vue/cli-service": "^3.7.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-cli-plugin-vuetify": "^0.5.0",
    "vue-template-compiler": "^2.5.21",
    "vuetify-loader": "^1.0.5"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/prettier"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

[elorzafe]

@24jr I can confirm the issue is that you can multiple instances of @aws-amplify/core on your node_modules directory. can you changing your packages.json and re-install again? (npm install or yarn)

[24jr]

Sorry this may be obvious how to do for most people but I don't know how to do that. I just tried
npm uninstall -g @aws-amplify/cli
npm install -g @aws-amplify/cli
npm install

Same errors

I usually just run npm install -g @aws-amplify/clito upgrade and assumed that would overwrite old stuff.

Am I supposed to physically delete lines in package.json or something?

I've also added these as the docs say. but I think only ran these once at beginning but not recently. Do I run these again?

npm i aws-amplify
npm i aws-amplify-vue

just tried

npm unstall aws-amplify
npm uninstall aws-amplify-vue
npm i aws-amplify
npm i aws-amplify-vue
npm install

same thing. I think I'll just quit for now before I mess something up and wait for your reply. Thanks by the way!

[elorzafe]

@24jr No worries, try replacing the whole package.json file with this

{
  "name": "roze",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "aws-amplify": "^1.1.36",
    "aws-amplify-vue": "^0.2.14",
    "core-js": "^2.6.5",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuetify": "^1.5.18",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-eslint": "^3.7.0",
    "@vue/cli-plugin-pwa": "^3.7.0",
    "@vue/cli-service": "^3.7.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-cli-plugin-vuetify": "^0.5.0",
    "vue-template-compiler": "^2.5.21",
    "vuetify-loader": "^1.0.5"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/prettier"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

and then on your project run npm install

[24jr]

Still getting same errors after doing this. Also now amplify isn't found in cli. like amplify status for example says command not found

but then ran

npm uninstall -g @aws-amplify/cli
npm install -g @aws-amplify/cli
npm install

and amplify status works but still same issues

so I tried amplify remove predictions and removed translateText
then readded the same thing to see if it would change anything but same issue. Also idk why its asking me to specify source and target language in this setup as I plan to create the same translate component as aws has here https://us-east-1.console.aws.amazon.com/translate/home?region=us-east-1#translation but maybe just default values or something but I'll just gonna continue to use that link if I can't get this working to be able to use in admin part of app although not ideal

[elorzafe]

@24jr I did this to make it work Predictions on a Vue App.

• First I created an app called hello-vue using vue cli vue create hello-vue
• Inside of hello-vue directory I did amplify init and then amplify predictions add and select Convert and then Translate text into a different language as you did
• on main.js file I have this

import Vue from 'vue'
import App from './App.vue'
import Amplify, * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin } from 'aws-amplify-vue'
import awsconfig from './aws-exports'
import { AmazonAIPredictionsProvider } from '@aws-amplify/predictions';

Vue.config.productionTip = false
Amplify.configure(awsconfig)
Amplify.addPluggable(new AmazonAIPredictionsProvider());
Vue.use(AmplifyPlugin, AmplifyModules)

new Vue({
  render: h => h(App)
}).$mount('#app')

• On App.vue file I have this

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { components } from 'aws-amplify-vue'
export default {
  name: 'app',
  components: {
    HelloWorld,
    ...components
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

• Finally on components/HelloWorld.vue I have this

<template>
  <div class="hello">
    <div id="app-5">
      <button v-on:click="convertText">Convert text</button>
    </div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  methods: {
    convertText: function() {
      this.$Amplify.Predictions.convert({
        translateText: {
            source: {
              text: 'hello'
            }
          } 
      }).then(result => console.log({result}));
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

I hope this helps

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[24jr]

I still get same error More than one or no providers are configured I'm sure it works fine by itself but prob problem with having all the amplify stuff run collectively

[rpostulart]

I have the same issue after upgrading from 2.7 to the latest 3.x

[thomasdowell]

Updating from version 3.1.21 to 3.1.22 and the latest 3.1.23 resulted in this error.

[Paulo-W]

I had the same problem with the newest 3.* version. Adding the following to my main.ts seemed to fix it for me.

Amplify.configure(awsconfig);

Amplify.register(Predictions);
Predictions.addPluggable(new AmazonAIPredictionsProvider());