Issue with migrating existing React router based app to Remix

[shirshendubhowmick]

I was trying to migrate my existing React router app to Remix based on this guide:
https://remix.run/docs/en/v1/guides/migrating-react-router-app

I am facing a problem with routes that are part of react router (inside old-app).

Error: useRoutes() may be used only in the context of a <Router> component.

The setup I have is exactly same as shown here https://github.com/kentcdodds/incremental-react-router-to-remix-upgrade-path

With only one difference, it's inside a monorepo.

I have tried all basic troubleshooting steps and I have removed all additional stuff from old-app/app.tsx. Still facing the same error I am kind of stuck with this.

This is how my old-app/App.tsx looks like:

import React from 'react'
import { Routes, Route } from 'react-router-dom'

function App(): React.ReactElement {
  return (
    <div>
      <Routes>
        <Route path="/page1" element={<p>Hello World</p>} />
      </Routes>
    </div>
  )
}

export default App

Any help / insights will really be helpful as I am kind of stuck here.

[shirshendubhowmick]

The root behind this, the app was using two different instance of React router.

As mentioned it's a monorepo, there was two different React router inside node modules which caused the issue. React router is suppose to be used as singleton.

A better error message here would have been helpful. Just like React which clearly points this kind of error.