Ts React use error

[blockmood]

import { API } from '@stoplight/elements';
...

<API
        apiDescriptionUrl="xxxx"
        router="history"
        layout="sidebar"
      />

Uncaught TypeError: Cannot read properties of undefined (reading 'location')
    at useLocation (hooks.js:29:1)
    at APIWithSidebarLayout (index.mjs:163:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
useLocation @ hooks.js:29
APIWithSidebarLayout @ index.mjs:163
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
dispatchAction @ react-dom.development.js:16139
(anonymous) @ index.mjs:3115
Promise.then (async)
(anonymous) @ index.mjs:3112
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
react_devtools_backend.js:4012 The above error occurred in the <APIWithSidebarLayout> component:

    at APIWithSidebarLayout (http://localhost:8080/static/js/vendors-node_modules_stoplight_elements_index_mjs.chunk.js:197696:5)
    at InlineRefResolverProvider (http://localhost:8080/static/js/vendors-node_modules_stoplight_elements_index_mjs.chunk.js:192116:5)
    at APIImpl (http://localhost:8080/static/js/vendors-node_modules_stoplight_elements_index_mjs.chunk.js:198213:5)
    at MarkdownViewerProvider (http://localhost:8080/static/js/vendors-node_modules_stoplight_elements_index_mjs.chunk.js:203035:5)
    at MarkdownComponentsProvider (http://localhost:8080/static/js/vendors-node_modules_stoplight_elements_index_mjs.chunk.js:196705:5)
    at Route (http://localhost:8080/static/js/vendors-node_modules_stoplight_elements_index_mjs.chunk.js:17697:29)
    at Router (http://localhost:8080/static/js/vendors-node_modules_stoplight_elements_index_mjs.chunk.js:17316:30)
    at BrowserRouter (http://localhost:8080/static/js/vendors-node_modules_stoplight_elements_index_mjs.chunk.js:16529:35)
    at WithRouter (http://localhost:8080/static/js/vendors-node_modules_stoplight_elements_index_mjs.chunk.js:197247:34)
    at div
    at Box (http://localhost:8080/static/js/vendors-node_modules_stoplight_elements_index_mjs.chunk.js:31964:5)
    at Styled (http://localhost:8080/static/js/vendors-node_modules_stoplight_elements_index_mjs.chunk.js:197315:1)
    at withStyles(WithRouter(APIImpl))
    at Provider (http://localhost:8080/static/js/vendors-node_modules_stoplight_elements_index_mjs.chunk.js:91999:5)
    at withPersistenceBoundary(withStyles(WithRouter(APIImpl)))
    at div
    at $b876e5ac9c98db373bf726bce3d604e$var$OverlayContainerDOM (http://localhost:8080/static/js/vendors-node_modules_stoplight_elements_index_mjs.chunk.js:36825:7)
    at ModalProvider (http://localhost:8080/static/js/vendors-node_modules_stoplight_elements_index_mjs.chunk.js:36774:5)
    at OverlayProvider
    at div
    at MosaicInnerProvider (http://localhost:8080/static/js/vendors-node_modules_stoplight_elements_index_mjs.chunk.js:49610:5)
    at SSRProvider (http://localhost:8080/static/js/vendors-node_modules_stoplight_elements_index_mjs.chunk.js:33079:62)
    at MosaicProvider
    at WithMosaicProvider(withPersistenceBoundary(withStyles(WithRouter(APIImpl))))
    at QueryClientProvider (http://localhost:8080/static/js/vendors-node_modules_stoplight_elements_index_mjs.chunk.js:165808:21)
    at WithQueryClientProvider(WithMosaicProvider(withPersistenceBoundary(withStyles(WithRouter(APIImpl)))))
    at div
    at OpenDsersSeller
    at RenderedRoute (http://localhost:8080/static/js/bundle.js:54825:5)
    at Suspense
    at div
    at Suspense (http://localhost:8080/static/js/bundle.js:231:5)
    at BasicLayout (http://localhost:8080/static/js/src_layout_BasicLayout_tsx.chunk.js:33:77)
    at RenderedRoute (http://localhost:8080/static/js/bundle.js:54825:5)
    at AppRoutes (http://localhost:8080/static/js/bundle.js:1374:78)
    at QueryParamProviderInner (http://localhost:8080/static/js/bundle.js:63676:5)
    at ReactRouter6Adapter (http://localhost:8080/static/js/bundle.js:63604:5)
    at QueryParamProvider (http://localhost:8080/static/js/bundle.js:63697:5)
    at Router (http://localhost:8080/static/js/bundle.js:55221:15)
    at BrowserRouter (http://localhost:8080/static/js/bundle.js:53406:5)
    at r (http://localhost:8080/static/js/bundle.js:49742:19)
    at ErrorBoundary (http://localhost:8080/static/js/bundle.js:49086:37)
    at PersistGate (http://localhost:8080/static/js/bundle.js:59554:5)
    at Provider (http://localhost:8080/static/js/bundle.js:50512:5)
    at Suspense
    at div
    at Suspense (http://localhost:8080/static/js/bundle.js:231:5)
    at AppProvider (http://localhost:8080/static/js/bundle.js:1125:5)
    at App

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

[mnaumanali94]

@blockmood Can we get the project where you had this error? A link to the git repo if it's public or a zip file should work.

[blockmood]

@mnaumanali94

dsers_dev.zip

1：download
2: yarn install

The way I create Dom now is feasible. Try to introduce the API directly and report an error?

[graham-atom]

any updates on this? I am getting the same error when trying to use the react component within a SPA react app that I am writing.

[graham-atom]

looks to be related to #2053

[blockmood]

@graham-atom
Create a dom, set attributes, and append them to the corresponding elements, which is how I solved it

[graham-atom]

ok is there a workaround that does not involve directly interacting with the DOM like that? or would stoplight need to update the versions of react-router to the latest?

[chohmann]

Hello!

Our team recently took over the stewardship of the elements repo.

Due the volume of un-triaged issues that are pretty old and the time it would take us to get caught up on all of them, we kindly ask that you open up a new ticket if this is still an issue you're struggling with.

If you open a new issue please include:

• clear steps to reproduce that include example OAS specs, application setup, code, etc.
• the error or issue you are experiencing
• the expected behavior

We will be triaging any new tickets in a timely manner.

Thank you for understanding!

[graham-atom]

I am still seeing an issue like this even after using node polyfills