CJS require imports broken in default create-react-app setup

[cogwirrel]

Describe the bug

In v5, require imports point to files with a .cjs extension (see here).

Unfortunately this means that if require imports are used in an app created with create-react-app, they are not loaded properly due to this issue with CRA: facebook/create-react-app#12700 - they are imported as if they are static files /static/media/index.[hash].cjs.

While users are most likely to use import syntax, the issue appears if a library is used that makes use of @tanstack/react-query and gets built as commonjs, and transpiled to use require.

This was not the case in v4, the package.json pointed to a file with the .js extension (see here).

While the root of the problem is the issue with create-react-app, I wonder if this is something worth addressing in react-query (if possible) as I imagine a fair few customers will use create-react-app.

Your minimal, reproducible example

https://github.com/cogwirrel/tanstack-query-cra-require-example

Steps to reproduce

With Example Repo

1. Clone this repo
2. npm i
3. npm start
4. Observe error in console:

App.js:6 Uncaught TypeError: rq.QueryClient is not a constructor
    at ./src/App.js (App.js:6:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/index.js (App.js:30:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at startup:7:1
    at startup:7:1

From Fresh create-react-app App

1. npx create-react-app my-example-app
2. Add "@tanstack/react-query": "^5.0.0" to package.json
3. npm i
4. Add the following to App.js:

const rq = require('@tanstack/react-query');
console.log('rq', rq); // Prints a static asset path!

const qc = new rq.QueryClient(); // Fails!
console.log(qc);

5. npm start
6. Observe error in console

Expected behavior

Expect require imports to import the module, rather than fall back to the default loader in create-react-app which treats the library as a static file.

Again the root cause is facebook/create-react-app#12700 but it might be something worth addressing as it worked in v4.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: MacOS
• Browser: Chrome
• Version: 118.0.5993.70

Tanstack Query adapter

react-query

TanStack Query version

5.0.0

TypeScript version

No response

Additional context

No response

[TkDodo]

hmm, we actually have integration tests with various bundlers to see if what we build is consumable. There's also one for cra4:

https://github.com/TanStack/query/tree/1d3ee672d2a1536e3463243813c91902aa97d973/integrations/react-cra4

but we haven't tested against importing via require.

@DamianOsipiuk @lachlancollins is this something worth addressing / easy to fix ?

[DamianOsipiuk]

This was the reason that previously we had .js, .esm.js and .mjs.
Currently since we have type: 'module' in package.json, we need .cjs extension for node to properly load it.
I do not think we would be able to change it unless we remove type: 'module' and change emitted files extensions.

So to sum up, if you are using configuration that do not recognize .cjs files, you should probably make a change in your config or stay on v4 version until you are able to do so.