search

Uniswap / interface

🦄 Open source interfaces for the Uniswap protocol
https://app.uniswap.org
GNU General Public License v3.0
4.99k stars 5.05k forks source link

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

Open xtools-at opened 2 years ago

xtools-at commented 2 years ago

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!

zzmp commented 2 years ago

If this is caused by a clash of dependencies, could you resolve it by using yarn's package.json's "resolutions" field? I'll look into what is happening, but this may make it usable in the interim.

zzmp commented 2 years ago

Looks very likely based on https://github.com/reduxjs/react-redux/issues/1489#issuecomment-570726987. I'll make redux and react-redux peer deps.