React Location dev tools isn't hidden in production

[mhesham32]

Describe the bug

I have dev tools from React Query and React Location and when I deployed the app to production only react query dev tools was hidden but react location dev tools wasn't

Your Example Website or App

https://heartfelt-lokum-be0567.netlify.app/

Steps to Reproduce the Bug or Issue

put the tools component under the Router component

<ReactLocationDevtools position="top-right" />

Expected behavior

I'm expecting it to be not included in the prod build same as React Query tools

Screenshots or Videos

Platform

• OS: Windows
• Browser:Chrome
• Version: 107

Additional context

No response

[tannerlinsley]

https://tanstack.com/router/v1/docs/devtools#only-importing-and-using-devtools-in-production

[mhesham32]

thanks, I think I will use that. but shouldn't it be hidden in production even if it was imported at the top

[mhesham32]

also, I'm using these two packages

import { Router, ReactLocation } from '@tanstack/react-location';
import { ReactLocationDevtools as RLD } from '@tanstack/react-location-devtools';

the one mentioned in the link is @tanstack/react-router-devtools which one should I use?

[tannerlinsley]

You can accomplish the same pattern with the react-location imports. Should work fine!

[mhesham32]

thanks, I got an error doing that so I ended up importing it like this

const ReactLocationDevtools =
  process.env.NODE_ENV === 'production'
    ? () => null // Render nothing in production
    : lazy(() =>
        import('@tanstack/react-location-devtools').then((m) => ({
          default: m.ReactLocationDevtools,
        }))
      );

[IanVS]

FWIW, it looks like the name has changed from ReactLocationDevtools to TanStackRouterDevtools. Thanks for the tip about the default export, @mhesham32.