fix(react-query-devtools): only export devtools in development mode by TkDodo · Pull Request #3861 · TanStack/query

TkDodo · 2022-07-19T11:26:12Z

vercel · 2022-07-19T11:26:17Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
query	❌ Failed (Inspect)		Jul 20, 2022 at 2:23PM (UTC)

fix types import

codesandbox-ci · 2022-07-19T11:37:41Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit b0ee7f3:

Sandbox	Source
@tanstack/query-example-react-basic	Configuration
@tanstack/query-example-react-basic-typescript	Configuration

satya164 · 2022-07-19T11:55:24Z

packages/react-query-devtools/src/index.ts

@@ -1 +1,12 @@
-export * from './devtools'
+if (process.env.NODE_ENV !== 'development') {


I find it's better to do process.env.NODE_ENV === 'production' since it matches with the behaviour of most tools (e.g. npm recognizes production) etc. and also what tools usually recommend to set for production (e.g. webpack). While most do set development in case it's not production, in case someone sets it to a different one (say for building with staging API etc.) then it'll cause different behaviour between other tools and React Query.

we can do that, I just got this from the v3 implementation. Problem is that this doesn't really work with ESM. If we take a look at the codesandbox build:

https://codesandbox.io/s/tanstack-query-example-react-basic-hofver

we can see the error:

Could not find module in path: '@tanstack/react-query-devtools/build/esm/devtools' relative to '/node_modules/@tanstack/react-query-devtools/build/esm/index.js'

I think the cjs builds are fine, and in the umd builds, I can see that it is properly there for dev builds and removed for prod builds. But I don't think this is how it can work with esm builds. Any ideas?

@TkDodo afaik with webpack, we should be able to do something like this, in the package.json of devtools:

"exports": { "production": "./index-without-devtools.js", "default": "./index-with-devtools.js" }

https://webpack.js.org/guides/package-exports/

I haven't tried it, but looks like it would work.

right, we used to have this in the v4 beta, but it got lost during the monorepo move. let me see if I can restore it.

As per usual, esm 💩 -ing on the party. Let's try our best on the esm, but if we need to ship a version with the others fixed while we figure it out, we can.

@sachinraja fyi

@satya164 @TkDodo in case my comment gets lost, `process.env.NODE_ENV === 'production' will cause the dev tools to be run when running tests in test which uses 'test' for NODE_ENV

try to ship empty devtools

revert the node_env check

revert revert the node_env check

another attempt

codecov-commenter · 2022-07-20T08:03:15Z

Codecov Report

Merging #3861 (c412df0) into main (eab6e2c) will increase coverage by 0.45%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             main    #3861      +/-   ##
==========================================
+ Coverage   96.36%   96.81%   +0.45%     
==========================================
  Files          45       57      +12     
  Lines        2281     2668     +387     
  Branches      640      784     +144     
==========================================
+ Hits         2198     2583     +385     
- Misses         80       83       +3     
+ Partials        3        2       -1

Impacted Files	Coverage Δ
src/react/tests/utils.tsx
src/core/queryClient.ts
src/core/subscribable.ts
src/core/mutationCache.ts
src/react/useIsFetching.ts
src/devtools/utils.ts
src/devtools/useLocalStorage.ts
src/react/useQuery.ts
src/react/logger.native.ts
src/core/retryer.ts
... and 92 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update eb61db3...c412df0. Read the comment docs.

remove outdated files

MattyBalaam · 2022-07-20T09:31:58Z

packages/react-query-devtools/src/index.ts

+    return null
+  } as any
+
+if (process.env.NODE_ENV !== 'production') {


I believe this will cause issues when the environment is 'test'.

Perhaps something like this?

!['production', 'test'].includes(process.env.NODE_ENV)

@MattyBalaam what kind of issues 🤔

!['production', 'test'].includes(process.env.NODE_ENV) may not work since minifier needs simple logic to do DCE. process.env.NODE_ENV !== 'production' || process.env.NODE_ENV !== 'test' may work but it's usually better to bundle in production mode when running e2e tests to avoid development related stuff in test.

Many other tools use process.env.NODE_ENV !== 'production' (e.g. redux: https://github.com/reduxjs/redux-devtools/blob/a8883f287de2e36a12a4058635f8474cda34a0d4/packages/redux-devtools-extension/src/logOnlyInProduction.ts#L22) so a custom env will leave mix of dev and production code in the bundle.

So, using 4.0.5 I am seeing this issue because react-testing-library uses jsdom which is currently failing because window.matchMedia is not supported:

It will also probably slow down every single test run too.

the latest attempt doesn't use an env check at all

okay I think I got it now - added the !== development env check again for commonjs builds, and esm builds now use the separate exports field in package.json

remove main field from package.json

back to require

finally

add env check for cjs builds

fix(react-query-devtools): only export devtools in development mode

ba83d27

vercel bot deployed to Preview July 19, 2022 11:26 View deployment

fix(react-query-devtools): only export devtools in development mode

9736304

fix types import

vercel bot deployed to Preview July 19, 2022 11:35 View deployment

TkDodo mentioned this pull request Jul 19, 2022

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

Closed

satya164 reviewed Jul 19, 2022

View reviewed changes

TkDodo mentioned this pull request Jul 19, 2022

ESM compliant bundling #3521

Merged

fix(react-query-devtools): only export devtools in development mode

4937ac3

try to ship empty devtools

vercel bot deployed to Preview July 19, 2022 17:39 View deployment

fix(react-query-devtools): only export devtools in development mode

d673a82

revert the node_env check

vercel bot deployed to Preview July 19, 2022 17:40 View deployment

fix(react-query-devtools): only export devtools in development mode

21e12c3

revert revert the node_env check

vercel bot deployed to Preview July 19, 2022 17:43 View deployment

fix(react-query-devtools): only export devtools in development mode

006863a

vercel bot deployed to Preview July 19, 2022 18:08 View deployment

fix(react-query-devtools): only export devtools in development mode

7a7af15

another attempt

vercel bot had a problem deploying to Preview July 20, 2022 07:53 Failure

fix(react-query-devtools): only export devtools in development mode

0fe614a

remove outdated files

vercel bot had a problem deploying to Preview July 20, 2022 08:18 Failure

MattyBalaam reviewed Jul 20, 2022

View reviewed changes

fix(react-query-devtools): only export devtools in development mode

bc812ca

remove main field from package.json

vercel bot had a problem deploying to Preview July 20, 2022 09:49 Failure

fix(react-query-devtools): only export devtools in development mode

df9c197

back to require

vercel bot had a problem deploying to Preview July 20, 2022 09:56 Failure

fix(react-query-devtools): only export devtools in development mode

c412df0

finally

vercel bot had a problem deploying to Preview July 20, 2022 14:02 Failure

fix(react-query-devtools): only export devtools in development mode

b0ee7f3

add env check for cjs builds

vercel bot had a problem deploying to Preview July 20, 2022 14:23 Failure

TkDodo merged commit 0fda41a into TanStack:main Jul 20, 2022

TkDodo deleted the feature/treeshake-devtools branch July 20, 2022 14:56

jaworek mentioned this pull request Jul 20, 2022

fix: add "require" to "exports" in package.json of devtools #3883

Closed

		@@ -1 +1,12 @@
		export * from './devtools'
		if (process.env.NODE_ENV !== 'development') {

Uh oh!

Comments

Conversation

TkDodo commented Jul 19, 2022

Uh oh!

vercel bot commented Jul 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codesandbox-ci bot commented Jul 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov-commenter commented Jul 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

vercel bot commented Jul 19, 2022 •

edited

Loading

codesandbox-ci bot commented Jul 19, 2022 •

edited

Loading

codecov-commenter commented Jul 20, 2022 •

edited

Loading