react-query-devtools return null

[zxc1518343069]

Describe the bug

I use create-react-app to initialize a project. Execute npm i @tanstack/react-query-devtools @tanstack/react-query
After setting up according to the tutorial, react-query-devtools does not appear on my webpage

Your minimal, reproducible example

none

Steps to reproduce

npm i @tanstack/react-query-devtools @tanstack/react-query
Configure according to the textbook

Expected behavior

show react-query-devtools

How often does this bug happen?

Every time

Screenshots or Videos

Platform

mac
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"@tanstack/react-query": "^4.0.10",
"@tanstack/react-query-devtools": "^4.0.10",

react-query version

4.0.10

TypeScript version

No response

Additional context

none

[TkDodo]

which bundler are you using?

[TkDodo]

ah, just saw it's create react app.

lots our examples use create-react-app, and it works fine there:
https://tanstack.com/query/v4/docs/examples/react/simple

[JohnDaly]

For others who might run into this, on older versions of react-scripts the bundler will pick the UMD entrypoint for @tanstack/react-query-devtools, which is defined by "browser": "build/umd/index.production.js". This entrypoint is a noop and returns null for ReactQueryDevtools.

The latest version of react-scripts resolves things properly, using the ESM entrypoint instead.

[geraldodev]

https://unpkg.com/browse/@tanstack/[email protected]/build/umd/index.development.js the source is code of umd is literally returning null. I faced this problem using a shadow-cljs compiler which uses google closure compiler.

[TkDodo]

Yes we probably need a new issue for the umd build please, but this should only matter if you import it from a cdn. Bundlers would either pick up the cjs or the esm builds, which both work fine.

[geraldodev]

Sorry, I tried to open an issue like you asked but I struggle with the reproducible example. I'm using shadow-cljs compiler, so you are not benefit for an example provided by me.

[TkDodo]

In this case, the example can just link to the unpkg version of the development umd build because there we can see that it doesn't render anything

[geraldodev]

#3916

[x3bot]

For anyone stuck on an old version of CRA while using CRACO you can use an alias to work around this issue:

const cracoConfig = {
  webpack: {
    alias: {
      '@tanstack/react-query-devtools': '@tanstack/react-query-devtools/build/esm',
    }
  }
}