Swap Widget Error when using Next.js + Redux + MetaMask
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 5.5k
- Forks
- 5.4k
- PR merge metrics
- No merged PRs in 30d
Description
Bug Description
Hi, I'm trying to implement the Swap widget into my next.js app (next@12, react@17, react-redux@7, redux @4) and connecting to it from MetaMask. I'm passing down the injected MetaMask provider and a public rpc url as props, but it throwas an error:
Uncaught Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>
at useReduxContext (useReduxContext.js?2e92:24)
at useStore (useStore.js?0b98:20)
at useDispatch (useDispatch.js?33b5:17)
at Updater (redux-multicall.esm.js?6ddf:1939)
at renderWithHooks (react-dom.development.js?ac89:14985)
at mountIndeterminateComponent (react-dom.development.js?ac89:17811)
at beginWork (react-dom.development.js?ac89:19049)
at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:3994)
at invokeGuardedCallback (react-dom.development.js?ac89:4056)
at beginWork$1 (react-dom.development.js?ac89:23964)
at performUnitOfWork (react-dom.development.js?ac89:22776)
at workLoopSync (react-dom.development.js?ac89:22707)
at renderRootSync (react-dom.development.js?ac89:22670)
at performSyncWorkOnRoot (react-dom.development.js?ac89:22293)
at eval (react-dom.development.js?ac89:11327)
at unstable_runWithPriority (scheduler.development.js?bcd2:468)
at runWithPriority$1 (react-dom.development.js?ac89:11276)
at flushSyncCallbackQueueImpl (react-dom.development.js?ac89:11322)
at flushSyncCallbackQueue (react-dom.development.js?ac89:11309)
at batchedUpdates$1 (react-dom.development.js?ac89:22387)
at Object.notify (Subscription.js?db50:19)
at Subscription.notifyNestedSubs (Subscription.js?db50:90)
at Subscription.handleChangeWrapper (Subscription.js?db50:95)
at dispatch (redux.js?ebf2:297)
at eval (index.js?511b:11)
at dispatch (redux.js?ebf2:659)
at eval (actions.js?517c:744)
pointing to <Updater> and <Swap> components.
I've double-checked the props I'm passing, they look fine to me. This looks somewhat like a clash of dependencies to me, maybe as I'm using redux in the project already? Could anyone help me here? Much appreciated!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the Swap widget integration with Next.js 12, React 17, Redux, and the injected MetaMask provider. Start by tracing the and components in the stack trace and inspect how the react-redux context is used. Done means the widget renders without the reported missing-context error in this setup.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, redux, typescript
- Domain
- blockchain, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100