Ejected components and templates fail with an error about useLocation

[mstade]

Describe the bug

Ejecting a component or using a custom page template fails with an error:

An Error Has Occurred
useLocation() may be used only in the context of a <Router> component.

    at Navbar (http://127.0.0.1:4000/runtime/chunks/chunk-ULCZNDO3.js:38820:14)
    at div
    at RootLayout (http://127.0.0.1:4000/runtime/chunks/chunk-ULCZNDO3.js:46518:23)
    at Suspense
    at i3 (http://127.0.0.1:4000/runtime/browser-entry.js:13290:3)
    at RenderedRoute (http://127.0.0.1:4000/runtime/chunks/chunk-JWVKG376.js:4031:5)
    at Outlet (http://127.0.0.1:4000/runtime/chunks/chunk-JWVKG376.js:4413:26)
    at V (http://127.0.0.1:4000/runtime/browser-entry.js:12724:24)
    at z2 (http://127.0.0.1:4000/runtime/browser-entry.js:13155:25)
    at u4 (http://127.0.0.1:4000/runtime/browser-entry.js:13167:5)
    at Se (http://127.0.0.1:4000/runtime/browser-entry.js:13282:14)
    at x6 (http://127.0.0.1:4000/runtime/browser-entry.js:13319:10)
    at RenderedRoute (http://127.0.0.1:4000/runtime/chunks/chunk-JWVKG376.js:4031:5)
    at RenderErrorBoundary (http://127.0.0.1:4000/runtime/chunks/chunk-JWVKG376.js:4647:9)
    at DataRoutes (http://127.0.0.1:4000/runtime/chunks/chunk-JWVKG376.js:5303:5)
    at Router (http://127.0.0.1:4000/runtime/chunks/chunk-JWVKG376.js:4420:15)
    at RouterProvider (http://127.0.0.1:4000/runtime/chunks/chunk-JWVKG376.js:5118:5)

The stack trace of the error will differ slightly depending on the component, but the error is essentially the same. It looks as though components read from @theme are perhaps not placed under the right context?

To Reproduce
Steps to reproduce the behavior:

1. Eject any Redocly component – OR – create a custom page template per the instructions here: https://redocly.com/docs/realm/style/how-to/custom-page-templates#override-a-page-template
2. Run redocly preview --product=redoc-revel --plan=pro
3. Go to http:/127.0.0.1:4000
4. See error

Expected behavior

I would expect custom page templates and ejected components to just work.

Logs

n/a

OpenAPI description

n/a

Redocly Version(s)

1.27.2

Node.js Version(s)

20.17.0

OS, environment

macOS Sonoma 14.6.1

Additional context

n/a

[tatomyr]

Thanks for letting us know. Looking into.
cc @volodymyr-rutskyi

[tatomyr]

It could be some kind of packages mismatch / caching issue. I haven't been able to consistently replicate it.

@mstade could you check if installing @redocly/redoc-revel directly in your project helps? (Probably you'll need to remove node_modules and reinstall dependencies). If it's already installed, please make sure it's the latest version. As an alternative, you might try cleaning the npx cache (rm -rf ~/.npm/_npx).

[mstade]

Thank you @tatomyr for the swift response – much appreciated! I followed your suggestions and that seems to have worked for a custom page template I added, so I decided to try and eject the Footer component and got another error from the CLI:

❯ npx redocly eject component 'Footer/**'

Launching eject using NPX.

[error] Exiting due to uncaught exception
[error] Error in "nearest-redocly-config" loader: EMFILE: too many open files, watch
Error: EMFILE: too many open files, watch
    at FSWatcher._handle.onchange (node:internal/fs/watchers:207:21)
    at FSEvent.callbackTrampoline (node:internal/async_hooks:130:17)
Load stack:
LoadError: Error in "nearest-redocly-config" loader: EMFILE: too many open files, watch
    at file:///Users/mstade/.npm/_npx/c5555d82e6cad5c0/node_modules/@redocly/realm/dist/server/fs/cache.js:1:1551
    at async B.load (file:///Users/mstade/.npm/_npx/c5555d82e6cad5c0/node_modules/@redocly/realm/dist/server/fs/cache.js:1:1100)
    at async getConfig (file:///Users/mstade/.npm/_npx/c5555d82e6cad5c0/node_modules/@redocly/realm/dist/server/plugins/lifecycle.js:2:1813)
    at async file:///Users/mstade/.npm/_npx/c5555d82e6cad5c0/node_modules/@redocly/realm/dist/bin.js:2:4003

Looking at the error I figured maybe this was also related to your suspicion of package mismatch, so I did an npm install @redocly/realm in my project and that seems to have fixed the eject command. I can now also render the preview locally without the original issue, with ejected components as well.

I think you're definitely on to something about package mismatches.

[tatomyr]

Yes, maybe it's related to the usage of different packages. I mean, you use redoc-revel for the first command and no product for the second command (which means using the default realm product). So each of the used products should be installed directly, I guess.

@volodymyr-rutskyi maybe we need to clarify the usage in the docs? Or there is a broader issue with package mismatch?

@mstade I'm closing the issue since it's been resolved for you. Please ping me here if it isn't.

[mstade]

Sounds reasonable, thanks @tatomyr for the assistance. I hadn't realized you had to specify a product with the eject command also, but that makes sense. I'll change our usage so we use redoc-revel there as well. Thank you for the pointer!

For what it's worth, I couldn't find any mention of any of this in the docs, so if this is the intended usage I'd definitely agree that clarifying this would've helped. Again, many thanks for the swift response!