@tanstack/react-query-devtools v4 does not include `NODE_ENV` check

[jaworek]

Describe the bug

According to the documention, devtools should only be included in development mode:
https://tanstack.com/query/v4/docs/devtools#install-and-import-the-devtools

React Query v3 devtools include check for that:
https://github.com/TanStack/query/blob/v3/devtools/index.js

React Query v4 are missing this check which results in devtools being bundled in production and increasing overall bundle size:
https://github.com/TanStack/query/blob/main/packages/react-query-devtools/src/index.ts

Your minimal, reproducible example

https://stackblitz.com/edit/nextjs-odbs3c?file=pages/_app.js

React Query v3 does not have this issue:
https://stackblitz.com/edit/nextjs-ssq6g3?file=pages/_app.js

Steps to reproduce

1. Open _app.js file
2. Open terminal and run npm run build
3. Comment out <ReactQueryDevtools initialIsOpen={false} /> and import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
4. Run npm run build
5. Notice that shared bundle size decreased from 103kB to 90kB

Expected behavior

React Query Devtools should not be bundled in production build by default.

How often does this bug happen?

Every time

Screenshots or Videos

Next 12.2 project with devtools enabled:

Next 12.2 project with devtools disabled:

Platform

• OS: MacOS
• Browser: Chromium
• Version: 4.0.3

react-query version

4.0.3

TypeScript version

4.7.4

Additional context

No response

[TkDodo]

I re-created what we had in v3 here: #3861

but it doesn't seem to work well with ESM. Do you have a better idea?

[MattyBalaam]

I am guessing this issue also causes these failures in my tests too:

[TkDodo]

@jaworek can you try it out with this codesandbox preview build?

"@tanstack/react-query-devtools": "https://pkg.csb.dev/TanStack/query/commit/df9c197e/@tanstack/react-query-devtools",

it doesn't seem to work on my tests with the stackblitz - I get 101kb with the devtools and 87 without them.

However, I also get 101kb if I do:

      {process.env.NODE_ENV === 'development' && (
        <ReactQueryDevtools initialIsOpen={false} />
      )}

which, idk, should be the same as if the devtools were not there at all, right?

[Manubi]

Hi,
"@tanstack/react-query": "^4.0.5",
"@tanstack/react-query-devtools": "^4.0.6",

[TkDodo]

@Manubi which bundler is this?

[arthur-zhuk]

Having the same issue. Devtools not loading.

[TkDodo]

Can someone please provide more info?

[Manubi]

Hi again,

"react": "18.2.0",
"react-dom": "18.2.0",
"next": "12.2.2", with webpack 5.

Anything else?

[TkDodo]

fix is here:

• fix(react-query-devtools): support cjs in noop build #3884

[tzt9597pg]

I face the same problem like @Manubi