React query devtools are not importable in Node.JS

[sventschui]

Describe the bug

It seems the react query devtools are currently not node importable. Install the devtools package and run import("@tanstack/react-query-devtools") in a node REPL. This fails.

It can be fixed with a package.json in the build/esm folder containing { "type": "module" }, not sure this is a viable fix though.

Welcome to Node.js v18.7.0.
Type ".help" for more information.
> import("@tanstack/react-query-devtools")
Promise {
  <pending>,
  [Symbol(async_id_symbol)]: 357,
  [Symbol(trigger_async_id_symbol)]: 5
}
> (node:21609) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
<redacted cwd>/node_modules/@tanstack/react-query-devtools/build/esm/noop.js:18
export { ReactQueryDevtools, ReactQueryDevtoolsPanel };
^^^^^^

Uncaught SyntaxError: Unexpected token 'export'
> 

Your minimal, reproducible example

see description

Steps to reproduce

1. install "@tanstack/react-query-devtools"
2. run import("@tanstack/react-query-devtools") in a node repl

Expected behavior

Devtools are exported successfuly

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: Ubuntu
• Browser: n/a
• Node: 18.7.0 / 16.15.0

react-query version

4.0.10

TypeScript version

No response

Additional context

No response

[TkDodo]

devtools are browser specific. why would you import them in node?

[sventschui]

The use case is that we have a library that includes both a re-usable baseline for our microfrontend (browser) as well as some configuration builders used in the microfrontend build process (node). Sure one could argue that this should be split up into two separate packages but things will be tree-shaken away for browser builds

[TkDodo]

okay it seems that node picks up the esm build even though it cannot import esm? I'm lost with all of these bundlers / ways to import things lol. I just hope that all the other bundling issues around the devtools will fix this one as well.

[sventschui]

Node.js can actually handle ES modules but it thinks build/esm/noop.js (loaded via import("@tanstack/react-query-devtools") or import {} from "@tanstack/react-query-devtools") is a CJS module as the package.json does not include a "type": "module" declaration. (Note require("@tanstack/react-query-devtools") works as you already include a conditional import for require).

I could think of the following solutions:

• Rename build/esm/{index,noop}.js to build/esm/{index,noop}.mjs to let Node.js know the file is in ESM format. (Renaming the noop.js file should be sufficient but renaming index.js would bare consistency)
• Add a build/esm/package.json file with the content { "type": "module" } to let Node.js know the whole build/esm folder is ESM
• Redirect node.js to the CJS file even if it would support ESM by adding "node": "./build/cjs/noop.js", as the first export mapping.

The last solution seems to be the best. It would also solve "Dual package hazards" as outlined in https://nodejs.org/api/packages.html#dual-commonjses-module-packages .

[TkDodo]

I'll leave this to the experts @DamianOsipiuk @sachinraja

[DamianOsipiuk]

@sventschui could you check if https://github.com/TanStack/query/releases/tag/v4.0.11-beta.5 helps with that?

[TkDodo]

@sventschui this works for me now in v4.3.0-beta.3

• https://github.com/TanStack/query/releases/tag/v4.3.0-beta.3

Welcome to Node.js v16.13.0.
Type ".help" for more information.
> import("@tanstack/react-query-devtools")
Promise {
  <pending>,
  [Symbol(async_id_symbol)]: 26,
  [Symbol(trigger_async_id_symbol)]: 5,
  [Symbol(destroyed)]: { destroyed: false }
}

[sventschui]

Thank you, I'll give it a try