feat(react-query): preserve 'use client' directives (#5161)

* chore: preserve 'use client' directive in unbundled builds

* fix(react-query): add 'use client' to files missing it

* chore: lock version for rollup-plugin-preserve-directives

Author: Ephem

package.json

@@ -92,6 +92,7 @@
     "react-dom-17": "npm:react-dom@^17.0.2",
     "rimraf": "^3.0.2",
     "rollup": "^2.70.2",
+    "rollup-plugin-preserve-directives": "0.1.0",
     "rollup-plugin-size": "^0.2.2",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^5.6.0",

packages/react-query/src/errorBoundaryUtils.ts

@@ -1,3 +1,4 @@
+'use client'
 import type {
   DefaultedQueryObserverOptions,
   Query,

packages/react-query/src/reactBatchedUpdates.ts

@@ -1,2 +1,3 @@
+'use client'
 import * as ReactDOM from 'react-dom'
 export const unstable_batchedUpdates = ReactDOM.unstable_batchedUpdates

packages/react-query/src/useBaseQuery.ts

@@ -1,3 +1,4 @@
+'use client'
 import * as React from 'react'
 import { useSyncExternalStore } from './useSyncExternalStore'
 

packages/react-query/src/useInfiniteQuery.ts

@@ -1,3 +1,4 @@
+'use client'
 import type {
   QueryObserver,
   QueryFunction,

packages/react-query/src/useIsFetching.ts

@@ -1,3 +1,4 @@
+'use client'
 import * as React from 'react'
 import type { QueryKey, QueryFilters } from '@tanstack/query-core'
 import { notifyManager, parseFilterArgs } from '@tanstack/query-core'

packages/react-query/src/useIsMutating.ts

@@ -1,3 +1,4 @@
+'use client'
 import * as React from 'react'
 import { useSyncExternalStore } from './useSyncExternalStore'
 

packages/react-query/src/useMutation.ts

@@ -1,3 +1,4 @@
+'use client'
 import * as React from 'react'
 import { useSyncExternalStore } from './useSyncExternalStore'
 

packages/react-query/src/useQueries.ts

@@ -1,3 +1,4 @@
+'use client'
 import * as React from 'react'
 import { useSyncExternalStore } from './useSyncExternalStore'
 

packages/react-query/src/useQuery.ts

@@ -1,3 +1,4 @@
+'use client'
 import type { QueryFunction, QueryKey } from '@tanstack/query-core'
 import { parseQueryArgs, QueryObserver } from '@tanstack/query-core'
 import type {

packages/react-query/src/useSyncExternalStore.ts

@@ -1,3 +1,4 @@
+'use client'
 // Temporary workaround due to an issue with react-native uSES - https://github.com/TanStack/query/pull/3601
 import { useSyncExternalStore as uSES } from 'use-sync-external-store/shim/index.js'
 

pnpm-lock.yaml

@@ -7,6 +7,7 @@ import replace from '@rollup/plugin-replace'
 import nodeResolve from '@rollup/plugin-node-resolve'
 import commonJS from '@rollup/plugin-commonjs'
 import path from 'path'
+import preserveDirectives from 'rollup-plugin-preserve-directives'
 
 type Options = {
   input: string | string[]
@@ -285,6 +286,7 @@ function mjs({
       commonJS(),
       nodeResolve({ extensions: ['.ts', '.tsx', '.native.ts'] }),
       forceDevEnv ? forceEnvPlugin('development') : undefined,
+      preserveDirectives(),
     ],
   }
 }
@@ -324,6 +326,7 @@ function esm({
       commonJS(),
       nodeResolve({ extensions: ['.ts', '.tsx', '.native.ts'] }),
       forceDevEnv ? forceEnvPlugin('development') : undefined,
+      preserveDirectives(),
     ],
   }
 }
@@ -375,6 +378,7 @@ function cjs({
         preventAssignment: true,
         delimiters: ['', ''],
       }),
+      preserveDirectives(),
     ],
   }
 }