[v5] Update `Devtools in production` docs section

[snelsi]

Describe the bug

Devtools in production docs code section is outdated.

This import:

const ReactQueryDevtoolsProduction = React.lazy(() =>
  import('@tanstack/react-query-devtools/build/lib/index.prod.js').then(
    (d) => ({
      default: d.ReactQueryDevtools,
    }),
  ),
)

throws error:

Cannot find module '@tanstack/react-query-devtools/build/lib/index.prod.js' or its corresponding type declarations.ts(2307)

Your minimal, reproducible example

https://tanstack.com/query/v5/docs/react/devtools#devtools-in-production

Steps to reproduce

1. Update react-query version to: "@tanstack/react-query": "5.0.0-beta.23", "@tanstack/react-query-devtools": "5.0.0-beta.23",

2. Copy-paste this example to your project: https://tanstack.com/query/v5/docs/react/devtools#devtools-in-production

3. TS linter will mark this as an error

Expected behavior

@tanstack/react-query-devtools/build/ has legacy and modern folders in it. I guess this code should look like this?

const ReactQueryDevtoolsProduction = React.lazy(() =>
  import('@tanstack/react-query-devtools/build/modern/production.js').then(
    (d) => ({
      default: d.ReactQueryDevtools,
    }),
  ),
)

How often does this bug happen?

Every time

Screenshots or Videos

Platform

-

Tanstack Query adapter

react-query

TanStack Query version

5

TypeScript version

5.2.2

Additional context

No response

[TkDodo]

good catch. can you please raise a PR to update that section?

https://tanstack.com/query/v5/docs/react/devtools#devtools-in-production

I think the modern bundlers section should be unaffected because we've updated the package.json exports. I'm wondering if we should revert the order in the guide, because most bundlers should understand package.json exports by now ...

[igortas]

Hi @TkDodo What is the alternative of /build/lib/index.prod.js for version 5, when is used with legacy tool like CRA?

[TkDodo]

build/modern/production.cjs I think

[igortas]

@TkDodo shows error on the terminal for all possibilities modern or legacy. The error is like:

Package path ./build/modern/production.cjs is not exported from package

[TkDodo]

hmm @lachlancollins can you maybe have a look here please?

[lachlancollins]

Hi @snelsi, if I'm not mistaken, you should just import from @tanstack/react-query-devtools/production rather than referencing the direct file, and your bundler should resolve the file. Also I don't think you need to wrap in lazy, check out this example. Docs might need updating, lmk how it goes!

[lachlancollins]

For reference, these are the exports in its package.json:

[snelsi]

@lachlancollins I don't think importing @tanstack/react-query-devtools/production works. 😥 At least not in my Next.js app

[snelsi]

However, import "@tanstack/react-query-devtools" seems to work fine?

[snelsi]

Uh, I think I'm just missing

"module": "nodenext",
"moduleResolution": "nodenext",

in my tsconfig.json

[TkDodo]

someone please update the documentation on how the imports really work (on the rc branch). Thanks.

[bastibuck]

After the release this is still an issue.

I checked the source and the package.json states the following exports

"exports": {
    ".": {
      "import": {
        "types": "./build/modern/index.d.ts",
        "default": "./build/modern/index.js"
      },
      "require": {
        "types": "./build/modern/index.d.cts",
        "default": "./build/modern/index.cjs"
      }
    },
    "./production": {
      "import": {
        "types": "./build/modern/production.d.ts",
        "default": "./build/modern/production.js"
      },
      "require": {
        "types": "./build/modern/production.d.cts",
        "default": "./build/modern/production.cjs"
      }
    },
    "./package.json": "./package.json"
  },

Thinking the /production should be the one I want in this case.

When I use the following code inside my NextJS app

const ReactQueryDevtoolsProduction = React.lazy(() =>
  import('@tanstack/react-query-devtools/production').then(imp => ({
    default: imp.ReactQueryDevtools,
  })),
);

I still get Cannot find module '@tanstack/react-query-devtools/production' or its corresponding type declarations.ts(2307)

It works fine though - in production and development build of nextjs.

Anyone knows how to fix this properly? If so I can also update the README with the resulting changes

[TkDodo]

yeah I haven't looked into this, but we need to straighten this out. @DamianOsipiuk @lachlancollins with the new bundling setup, do you know what's the best way to import the devtools in production ?

[todorone]

Just a confirmation, that i wasn't able to make work lazy import of production bundle in legacy way(modern one is not accessible to me as i can't adjust TS config module properties to required)

[DamianOsipiuk]

@todorone @bastibuck @snelsi Could any of you try locally patching devtools package and add following to package.json -> exports?

"exports": {
  ...
  "./build/modern/production.js": {
    "import": {
      "types": "./build/modern/production.d.ts",
      "default": "./build/modern/production.js"
    },
    "require": {
      "types": "./build/modern/production.d.cts",
      "default": "./build/modern/production.cjs"
    }
  },
},

And then try

const ReactQueryDevtoolsProduction = React.lazy(() =>
  import('@tanstack/react-query-devtools/build/modern/production.js').then(
    (d) => ({
      default: d.ReactQueryDevtools,
    }),
  ),
)

[todorone]

@DamianOsipiuk it works for me, Vite bundler

[stefanofa]

@todorone @bastibuck @snelsi Could any of you try locally patching devtools package and add following to package.json -> exports?

"exports": {
  ...
  "./build/modern/production.js": {
    "import": {
      "types": "./build/modern/production.d.ts",
      "default": "./build/modern/production.js"
    },
    "require": {
      "types": "./build/modern/production.d.cts",
      "default": "./build/modern/production.cjs"
    }
  },
},

And then try

const ReactQueryDevtoolsProduction = React.lazy(() =>
  import('@tanstack/react-query-devtools/build/modern/production.js').then(
    (d) => ({
      default: d.ReactQueryDevtools,
    }),
  ),
)

This works in next.js with following tsconfig compilerOptions:

"module": "esnext",
"moduleResolution": "node",

[TkDodo]

nice, then lets put that in the docs and @DamianOsipiuk I guess it means changing exports too ?

[DamianOsipiuk]

Yup, ideally both changes in one PR.

[bastibuck]

@todorone @bastibuck @snelsi Could any of you try locally patching devtools package and add following to package.json -> exports?

"exports": {
  ...
  "./build/modern/production.js": {
    "import": {
      "types": "./build/modern/production.d.ts",
      "default": "./build/modern/production.js"
    },
    "require": {
      "types": "./build/modern/production.d.cts",
      "default": "./build/modern/production.cjs"
    }
  },
},

And then try

const ReactQueryDevtoolsProduction = React.lazy(() =>
  import('@tanstack/react-query-devtools/build/modern/production.js').then(
    (d) => ({
      default: d.ReactQueryDevtools,
    }),
  ),
)

I can confirm, works with nextjs for me as well

[bastibuck]

Just updated it in my app and it works with the new version.

IMO this can be closed

[melvinotieno]

After adding moduleResolution: NodeNext and module: NodeNext I am now getting the following error

The inferred type of 'ReactQueryDevtoolsProduction' cannot be named without a reference to '../../node_modules/@tanstack/react-query-devtools/build/modern/devtools-dKCOqp9Q.js'. This is likely not portable. A type annotation is necessary.ts(2742)

Also, changing the moduleResolution and module to NodeNext messes up with the project such that every other import requires to have the file extension. And without NodeNext, then @tanstack/react-router routes has type issues

[lachlancollins]

After adding moduleResolution: NodeNext and module: NodeNext I am now getting the following error

The inferred type of 'ReactQueryDevtoolsProduction' cannot be named without a reference to '../../node_modules/@tanstack/react-query-devtools/build/modern/devtools-dKCOqp9Q.js'. This is likely not portable. A type annotation is necessary.ts(2742)

Also, changing the moduleResolution and module to NodeNext messes up with the project such that every other import requires to have the file extension. And without NodeNext, then @tanstack/react-router routes has type issues

Hi @melvinotieno , this is a separate issue. Could you please create a new issue and a repro?