Shop Minis Navigation Transitions Throwing This Error

Shop Minis
1

##App.tsx

import {MinisRouter} from '@shopify/shop-minis-react'
import {Routes, Route} from 'react-router'
// import { HomePage, QuestionnairePage, ProductResultsPage } from './pages'

export function App() {
  return (
    <MinisRouter viewTransitions>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/action" element={<ActionPage />} />
      </Routes>
    </MinisRouter>
  )
}


function HomePage() {
  return <div>Home Page</div>
}

function ActionPage(){
  return <div>Action Page</div>
}

##Main.tsx

import {StrictMode} from 'react'

import {createRoot} from 'react-dom/client'

import './index.css'

import {MinisContainer} from '@shopify/shop-minis-react'




import {App} from './App'




createRoot(document.getElementById('root')!).render(

  <StrictMode>

    <MinisContainer>

      <App />

    </MinisContainer>

  </StrictMode>

)

##Error

Uncaught Error: useRoutes() may be used only in the context of a  component.
at invariant (react-router.js?v=a26695b3:198:11)
at useRoutesImpl (react-router.js?v=a26695b3:5520:3)
at useRoutes (react-router.js?v=a26695b3:5516:10)
at Routes (react-router.js?v=a26695b3:6539:10)
at renderWithHooks (chunk-4KLVAB6W.js?v=a26695b3:12149:26)
at mountIndeterminateComponent (chunk-4KLVAB6W.js?v=a26695b3:14899:21)
at beginWork (chunk-4KLVAB6W.js?v=a26695b3:15880:22)
at HTMLUnknownElement.callCallback2 (chunk-4KLVAB6W.js?v=a26695b3:3672:22)
at Object.invokeGuardedCallbackDev (chunk-4KLVAB6W.js?v=a26695b3:3697:24)
at invokeGuardedCallback (chunk-4KLVAB6W.js?v=a26695b3:3731:39)Understand this error
chunk-4KLVAB6W.js?v=a26695b3:14014 The above error occurred in the  component:

at Routes (http://localhost:9001/node_modules/.vite/deps/react-router.js?v=a26695b3:6536:3)
at TransitionContainer (http://localhost:9001/node_modules/.vite/deps/@shopify_shop-minis-react.js?v=a26695b3:65236:32)
at Router2 (http://localhost:9001/node_modules/.vite/deps/@shopify_shop-minis-react.js?v=a26695b3:39747:13)
at BrowserRouter (http://localhost:9001/node_modules/.vite/deps/@shopify_shop-minis-react.js?v=a26695b3:40310:3)
at MinisRouter (http://localhost:9001/node_modules/.vite/deps/@shopify_shop-minis-react.js?v=a26695b3:65244:3)
at App
at ImagePickerProvider (http://localhost:9001/node_modules/.vite/deps/@shopify_shop-minis-react.js?v=a26695b3:9602:32)
at ErrorBoundary (http://localhost:9001/node_modules/.vite/deps/@shopify_shop-minis-react.js?v=a26695b3:9841:21)
at MinisContainer (http://localhost:9001/node_modules/.vite/deps/@shopify_shop-minis-react.js?v=a26695b3:9859:27)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
2

Weird, I remember running into this issue early on in the project. I upgraded my shop mini project using `npx shop-mini upgrade`, so may be try that and see if that work. Reinstall your node_modules.

Also, I was comparing your app.tsx code with mine, I noticed that you have a prop viewTransitions which I don’t have in my code. I don’t see this prop in the docs either. So try removing that prop. Good luck.

1 Like
3

Yeah this fixed the issue.

image
image1484×873 82 KB

This is the latest doc where i find the viewTransitions