Uniswap / Uniswap/interface

Swap Widget Error when using Next.js + Redux + MetaMask

Open
#3,342 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.