Uncaught Error: Invalid hook call.

[Rishabhraghwendra18]

Bug Description I want to use uniswap widget but getting this error in the chrome dev console:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1476:1)
    at useContext (react.development.js:1484:1)
    at Fe (ThemeProvider.js:47:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)

I don't know why its happening . Just by importing the SwapWidget I am getting this error. Steps to Reproduce

1. Install @uniswap/widgets: ^2.7.0
2. simply create a react app using yarn: yarn create react-app my-app.
3. Copy paste my code to see the issue: App.jsx:

   
   import Navbar from './components/Navbar';
   import UniSwapWidget from "./components/Uniswap-widget";
   import './App.css';

function App() { return (

); }

export default App;

Create a file in `src` folder and paste the below code

`Uniswap-widget/index.js`:

import React from "react"; import { SwapWidget } from '@uniswap/widgets' import '@uniswap/widgets/fonts.css'

function UniSwapWidget() { return (

); }

export default UniSwapWidget;

**Expected Behavior**
Should not throw error and able to swap the tokens. 

**Additional Context**
versions:
`yarn: 1.22.19`
`nodejs: v16.16.0`
`react: ^18.2.0`

[zzmp]

I believe this is occuring because of mismatched peerDeps.

I have a PR up to resolve this, but I don't know of a way to test it without deploying it. I'll do so tomorrow, and see if it's resolved or needs further investigation.

Thanks for reporting this! It's definitely an issue that we'd like to fix.

[github-actions[bot]]

:tada: This issue has been resolved in version 2.8.0 :tada:

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot :package::rocket:

[ilmpc]

I have spent some time on modifying widget to use custom routing contract and it works great in cosmos. But I can't build production package on my machine. I got a similar error to this issue. @zzmp Could you clarify how you solved it?

1. My react project works with package from npm (when I build it with parcel, not vite). I use react 18 by the way.
2. I've removed all of my changes and tried to build last version on main branch (52960be)
3. Project builds only with yarn.lock (if I delete it, I got a lot of errors from ts. Like implicit any usages and so on. I don't genuinely understand how it ignores that errors.). If I update react to 18, types or smth else build fails.
4. So in case I use code as-is and build with yarn && yarn build. I got a dist, but if I add it to my project using link (pnpm link, exactly), I facing invalid hooks usage error (in TestableWidget component, but I think it doesn't matter) 4a. I have tried to add package to clean CRAv5 project, but get the same result.

Well, is there any ideas what I'm doing wrong and how I can finally build package on my own? Thanks in advance

UPD. After all I found the problem - my builder add react twice, because I used package locally. So I have to remove node_modules from widgets folder and use webpack (parcel fails with 'can't resolve react')