Missing support for React Router 6

[jernej-lipovec-viaduct]

Describe the bug

When using React version of elements along with React Router 6 (currently 6.2.2)

To Reproduce

1. Create new react app with using latest @stoplight/elements (7.5.13) and latest react-router-dom (6.2.2)
2. Add 1 sample route to app inside BrowserRouter and Routes components.
3. Under that route add a simple API component with sample api docs
4. Navigate to that route.
5. Observe app crashing with error in useLocation(), where RouterContext is undefined.

Expected behavior

I would expect app to not crash when used with React Router 6.

Additional context

This error happens when regardless of "router" parameter or whether I am using apiDescriptionUrl or apiDescriptionDocument.

Environment (remove any that are not applicable):

• Library version: 7.15.3
• OS: MacOS 12.2.1
• Browser: Chrome 98
• Platform: web
• React router version: 6.2.2 (should be applicable to 6.x.x)

Error stacktrace

Uncaught TypeError: Cannot read properties of undefined (reading 'location')
    at useLocation (hooks.js:29:1)
    at APIWithSidebarLayout (index.esm.js:162: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)
    at workLoopSync (react-dom.development.js:22707:1)
    at renderRootSync (react-dom.development.js:22670:1)
    at performSyncWorkOnRoot (react-dom.development.js:22293:1)
    at react-dom.development.js:11327:1
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
    at flushSyncCallbackQueue (react-dom.development.js:11309:1)
    at discreteUpdates$1 (react-dom.development.js:22420:1)
    at discreteUpdates (react-dom.development.js:3756:1)
    at dispatchDiscreteEvent (react-dom.development.js:5889:1)

[CarltonHowell]

@jernej-lipovec-viaduct did you find any workarounds for this?

[jernej-lipovec-viaduct]

@jernej-lipovec-viaduct did you find any workarounds for this?

We are now using Web Component version of Elements and is working well for us.

[gchenuet]

Hey! Thanks for the report.

+1 here, any news on this issue?

[graham-atom]

any news? I am experiencing this same issue

[graham-atom]

@chohmann was just curious on when this issue might get fixed, thanks!

[chohmann]

@graham-atom this is something that is on our radar, but we have no concrete dates that we can promise.

[migarc1]

As @jernej-lipovec-viaduct mentioned, you can use this workaround:

const code = "https://api.apis.guru/v2/specs/github.com/1.1.4/openapi.yaml"; // Define the 'code' variable

  return (
    <div className='w-screen p-1'>
      <elements-api
        apiDescriptionUrl={code}
        router="hash"
      />
    </div>
  );

In my case, I am using TypeScript, so I have added this file: elements.d.ts

  // elements.d.ts
import * as React from 'react';

declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
      'elements-api': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
        apiDescriptionUrl?: string;
        router?: string;
      };
    }
  }
}

And I have added the file to my tsconfig.json.

"include": ["src", "src/types/elements.d.ts"],