Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 12 commits into from
Jul 20, 2022

Conversation

TkDodo
Copy link
Collaborator

@TkDodo TkDodo commented Jul 19, 2022

fixes #3860

@vercel
Copy link

vercel bot commented Jul 19, 2022

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)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 19, 2022

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

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

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?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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

@TkDodo TkDodo mentioned this pull request Jul 19, 2022
@codecov-commenter
Copy link

codecov-commenter commented Jul 20, 2022

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.

return null
} as any

if (process.env.NODE_ENV !== 'production') {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Perhaps something like this?

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@MattyBalaam what kind of issues 🤔

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!['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.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:
Screenshot 2022-07-20 at 11 54 39

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@TkDodo TkDodo merged commit 0fda41a into TanStack:main Jul 20, 2022
@TkDodo TkDodo deleted the feature/treeshake-devtools branch July 20, 2022 14:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

@tanstack/react-query-devtools v4 does not include NODE_ENV check
5 participants