aws-amplify
NextJs Predictions error after build: More than one or no providers are configured
Before opening, please confirm:
- [X] I have searched for duplicate or closed issues and discussions.
- [X] I have read the guide for submitting bug reports.
- [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
JavaScript Framework
Next.js
Amplify APIs
Predictions
Amplify Categories
Not applicable
Environment information
# Put output below this line
System:
OS: Linux 5.4 Ubuntu 20.04.4 LTS (Focal Fossa)
CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
Memory: 4.62 GB / 7.77 GB
Container: Yes
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
Browsers:
Chrome: 98.0.4758.102
npmPackages:
@ampproject/toolbox-optimizer: undefined ()
@babel/core: undefined ()
@babel/runtime: 7.15.4
@edge-runtime/primitives: 1.1.0-beta.17
@hapi/accept: undefined ()
@napi-rs/triples: undefined ()
@next/react-dev-overlay: undefined ()
@vercel/nft: undefined ()
acorn: undefined ()
amphtml-validator: undefined ()
arg: undefined ()
assert: undefined ()
async-retry: undefined ()
async-sema: undefined ()
aws-amplify: ^4.3.28 => 4.3.28
babel-packages: undefined ()
browserify-zlib: undefined ()
browserslist: undefined ()
buffer: undefined ()
bytes: undefined ()
chalk: undefined ()
ci-info: undefined ()
cli-select: undefined ()
comment-json: undefined ()
compression: undefined ()
conf: undefined ()
constants-browserify: undefined ()
content-disposition: undefined ()
content-type: undefined ()
cookie: undefined ()
cross-spawn: undefined ()
crypto-browserify: undefined ()
cssnano-simple: undefined ()
debug: undefined ()
devalue: undefined ()
domain-browser: undefined ()
edge-runtime: undefined ()
eslint: 8.20.0 => 8.20.0
eslint-config-next: 12.2.3 => 12.2.3
events: undefined ()
find-cache-dir: undefined ()
find-up: undefined ()
fresh: undefined ()
get-orientation: undefined ()
glob: undefined ()
gzip-size: undefined ()
http-proxy: undefined ()
https-browserify: undefined ()
icss-utils: undefined ()
ignore-loader: undefined ()
image-size: undefined ()
is-animated: undefined ()
is-docker: undefined ()
is-wsl: undefined ()
jest-worker: undefined ()
json5: undefined ()
jsonwebtoken: undefined ()
loader-utils: undefined ()
lodash.curry: undefined ()
lru-cache: undefined ()
micromatch: undefined ()
mini-css-extract-plugin: undefined ()
nanoid: undefined ()
native-url: undefined ()
neo-async: undefined ()
next: 12.2.3 => 12.2.3
node-fetch: undefined ()
node-html-parser: undefined ()
ora: undefined ()
os-browserify: undefined ()
p-limit: undefined ()
path-browserify: undefined ()
postcss-flexbugs-fixes: undefined ()
postcss-modules-extract-imports: undefined ()
postcss-modules-local-by-default: undefined ()
postcss-modules-scope: undefined ()
postcss-modules-values: undefined ()
postcss-preset-env: undefined ()
postcss-safe-parser: undefined ()
postcss-scss: undefined ()
postcss-value-parser: undefined ()
process: undefined ()
punycode: undefined ()
querystring-es3: undefined ()
raw-body: undefined ()
react: 18.2.0 => 18.2.0 (18.0.0)
react-dom: 18.2.0 => 18.2.0
react-is: 17.0.2
react-refresh: 0.12.0
react-server-dom-webpack: undefined ()
regenerator-runtime: 0.13.4
sass-loader: undefined ()
schema-utils: undefined ()
semver: undefined ()
send: undefined ()
setimmediate: undefined ()
source-map: undefined ()
stream-browserify: undefined ()
stream-http: undefined ()
string-hash: undefined ()
string_decoder: undefined ()
strip-ansi: undefined ()
tar: undefined ()
terser: undefined ()
text-table: undefined ()
timers-browserify: undefined ()
tty-browserify: undefined ()
ua-parser-js: undefined ()
unistore: undefined ()
util: undefined ()
vm-browserify: undefined ()
watchpack: undefined ()
web-vitals: undefined ()
webpack: undefined ()
webpack-sources: undefined ()
ws: undefined ()
npmGlobalPackages:
@aws-amplify/cli: 9.1.0
corepack: 0.10.0
create-next-app: 12.1.6
npm: 8.1.0
Describe the bug
I'm trying to get the translate to work. In dev (npm run dev) it works fine, but when i run a build locally and run (npm run start), I'm getting the error.
Expected behavior
The built application should not give this error and should translate the text
Reproduction steps
use this tutorial as a guideline: https://www.youtube.com/watch?v=9LmNhWMwwT4
- npx create-next-app appName
- amplify init (take defaults)
- amplify add auth (take defaults)
- amplify add predictions -> Convert -> Translate text into a different language -> friendlyname -> English -> Dutch -> Auth and guest users
- amplify push
- npm i aws-amplify
- change the code according to the code snippets below
- npm run build
- npm run start
- click the button translate and view the console.log
Code Snippet
// Put your code below this line.
// _app.js
import "../styles/globals.css";
import { Amplify } from "aws-amplify";
import { AmazonAIPredictionsProvider } from "@aws-amplify/predictions";
import awsconfig from "../src/aws-exports";
Amplify.configure(awsconfig);
Amplify.addPluggable(new AmazonAIPredictionsProvider());
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
// index.js
import styles from "../styles/Home.module.css";
import { Predictions } from "@aws-amplify/predictions";
import { useState } from "react";
export default function Home() {
const [response, setResponse] = useState("");
const translate = async () => {
try {
const result = await Predictions.convert({
translateText: { source: { text: "May the force be with you" } },
});
setResponse(result.text);
} catch (error) {
console.log("There was an error: ", error);
}
};
return (
<div className={styles.container}>
<main className={styles.main}>
<h1 className={styles.title}>Translate it</h1>
<div className={styles.grid}>
<div className={styles.card}>
<button onClick={translate}>Translate</button>
</div>
<div className={styles.card}>
<h2>Translated text:</h2>
<p>{response}</p>
</div>
</div>
</main>
</div>
);
}
Log output
// Put your logs below this line
Error: More than one or no providers are configured, Either specify a provider name or configure exactly one provider
at e.getPluggableToExecute (index-236d18220adddcfa.js:1:2972)
at e.convert (index-236d18220adddcfa.js:1:2621)
at index-236d18220adddcfa.js:1:4015
at s (main-a6a17768821d805e.js:1:95810)
at Generator._invoke (main-a6a17768821d805e.js:1:95598)
at forEach.e.<computed> [as next] (main-a6a17768821d805e.js:1:96233)
at n (index-236d18220adddcfa.js:1:237)
at u (index-236d18220adddcfa.js:1:4356)
at index-236d18220adddcfa.js:1:4415
at new Promise (<anonymous>)
aws-exports.js
No response
Manual configuration
No response
Additional configuration
No response
Mobile Device
No response
Mobile Operating System
No response
Mobile Browser
No response
Mobile Browser Version
No response
Additional information and screenshots
No response
Hi @DiegoMcDipster 👋 I'm curious if this issue is occurring because Amplify and the pluggable are being configured on the server. If you were to move the addPluggable line to run inside a useEffect hook, I wonder if that might resolve this issue for you.
-Amplify.addPluggable(new AmazonAIPredictionsProvider());
+function MyApp({ Component, pageProps }) {
+. useEffect(() => {
+ Amplify.addPluggable(new AmazonAIPredictionsProvider());
+. }, [])
+ return <Component {...pageProps} />;
+}
Could you try and report back whether it helped or not?
Hi @chrisbonifacio,
Thanks for looking into this.
That unfortunately doesn't work, but it does now give me the error in dev. Which means that I have a better error log on the client:
Error: More than one or no providers are configured, Either specify a provider name or configure exactly one provider
getPluggableToExecute Predictions.js:137
convert Predictions.js:116
_callee$ index.js:17
Babel 8
Home index.js:32
React 8
workLoop scheduler.development.js:266
flushWork scheduler.development.js:239
performWorkUntilDeadline scheduler.development.js:533
AND
Uncaught Error: Pluggable with name AmazonAIPredictionsProvider has already been added.
addPluggable Predictions.js:54
addPluggable Amplify.js:95
addPluggable Amplify.js:92
MyApp _app.js:12
React 7
workLoop scheduler.development.js:266
flushWork scheduler.development.js:239
performWorkUntilDeadline scheduler.development.js:533
[Predictions.js:54](webpack://_N_E/node_modules/@aws-amplify/predictions/lib-esm/Predictions.js?eb7c)
addPluggable Predictions.js:54
addPluggable Amplify.js:95
map self-hosted:180
addPluggable Amplify.js:92
MyApp _app.js:12
React 7
workLoop scheduler.development.js:266
flushWork scheduler.development.js:239
performWorkUntilDeadline scheduler.development.js:533
AND
The above error occurred in the <MyApp> component:
MyApp@webpack-internal:///./pages/_app.js:23:21
ErrorBoundary@webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20740
ReactDevOverlay@webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23545
Container@webpack-internal:///./node_modules/next/dist/client/index.js:152:24
AppContainer@webpack-internal:///./node_modules/next/dist/client/index.js:655:20
Root@webpack-internal:///./node_modules/next/dist/client/index.js:777:21
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. [next-dev.js:24:25](webpack://_N_E/node_modules/next/dist/client/next-dev.js?3515)
error next-dev.js:24
React 15
workLoop scheduler.development.js:266
flushWork scheduler.development.js:239
performWorkUntilDeadline scheduler.development.js:533
Hopefully, this will shed more light on it
Hi @DiegoMcDipster,
After what @chrisbonifacio suggested it appears that the issue is now related to Pluggable with name AmazonAIPredictionsProvider has already been added.
You may need to remove the Pluggable before re-adding it again by using Predictions.removePluggable('AmazonAIPredictionsProvider')
Could you try this and let me know if you have any issues? Also note that I was able to get it working from the workaround mentioned by @chrisbonifacio without the need to included Predictions.removePluggable('AmazonAIPredictionsProvider');
Hi @nadetastic
Unfortunately it didn't work.
But, you said you had @chrisbonifacio 's solution working. Here is an extract from my package.json. I'm wondering if it's a versions issue.
"dependencies": {
"aws-amplify": "^4.3.28",
"microphone-stream": "^6.0.1",
"next": "12.2.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.4.0"
},
"devDependencies": {
"eslint": "8.20.0",
"eslint-config-next": "12.2.3"
}
How do these versions compare to the versions you used to get it to work?
@DiegoMcDipster correct, the solution works for me. My versions are similar to what you have:
"aws-amplify": "^4.3.28",
"next": "12.2.3",
"react": "18.2.0",
"react-dom": "18.2.0",
My _app.js
import { Amplify } from "aws-amplify";
import { AmazonAIPredictionsProvider } from "@aws-amplify/predictions";
import awsconfig from "../src/aws-exports";
Amplify.configure(awsconfig);
function MyApp({ Component, pageProps }) {
useEffect(() => { // also works without wrapping in useEffect
Amplify.addPluggable(new AmazonAIPredictionsProvider());
},[]);
return <Component {...pageProps} />;
}
export default MyApp;
Im curious, how are you handling authentication? For example with Amplify UI Components or by calling Auth.signIn directly?
I'm allowing guest users. So, no auth UI implemented. I set this project up to play around with the predictions functionality.
I just did:
- amplify delete
- update my amplify cli to latest version
- amplify init (& all other steps listed above)
But still no luck.
Hi thanks for providing help in here! I got it fixed by combining your suggestions as follows in my _app.js:
useEffect(() => {
try {
Amplify.addPluggable(new AmazonAIPredictionsProvider())
} catch (error) {
console.log('Already added pluggable')
Amplify.removePluggable('AmazonAIPredictionsProvider')
}
},[]);
The logic: if I have the addPluggable error, then I just remove it :) It works like a charm/ Hope this provides help.
Hi @seduerr91 , thanks for the feedback. To confirm you were facing the same issue and the work around unblocked you?
Hi @DiegoMcDipster
Following up on this - let me know if you were able to get this working as @seduerr91 mentioned
I'm going to close this issue out at this time, as there hasn't been any updates on it. If you still have any questions/comment on this issue please let me know.