Warning with `use client` directive with Vite

[hckhanh]

Describe the bug

Module level directives cause errors when bundled, "use client" in "node_modules/@tanstack/react-query/build/lib/useSyncExternalStore.mjs" was ignored.

Your minimal, reproducible example

I don't have time

Steps to reproduce

Use query v4.28.0 with vite. I wonder does it affect the build or not.

Expected behavior

I will not see the warning

How often does this bug happen?

Every time

Screenshots or Videos

Platform

Windows: 11

Tanstack Query adapter

react-query

TanStack Query version

v4.28.0

TypeScript version

v5

Additional context

No response

[TkDodo]

please see the discussion on the PR:

• Preserve 'use client' directives #5161 (comment)

@Ephem I don't think there's anything we can do right now about this?

[Ephem]

No, besides removing the directives entirely there's nothing we can do in React Query itself sadly, at least that I know of. A bit swamped this week but I'll try to find some time to open issues (if none exist) and perhaps contribute an ignore for the warning to the Vite React plugin.

TL;DR for this warning: You can safely ignore it. If you want to hide it, you can use Rollups onwarn handler. Hopefully hiding the warning manually wont be necessary in the future. Details in comments in the PR.

[rodolfocerezo]

Hi, I'm also getting the same errors, at least we know now that is safe to ignore them.

vite v4.2.1 building for production...
Module level directives cause errors when bundled, "use client" in "node_modules/@tanstack/react-query-devtools/build/lib/index.mjs" was ignored.
Module level directives cause errors when bundled, "use client" in "node_modules/@tanstack/react-query/build/lib/useQueries.mjs" was ignored.
Module level directives cause errors when bundled, "use client" in "node_modules/@tanstack/react-query/build/lib/useQuery.mjs" was ignored.
Module level directives cause errors when bundled, "use client" in "node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs" was ignored.
Module level directives cause errors when bundled, "use client" in "node_modules/@tanstack/react-query/build/lib/Hydrate.mjs" was ignored.
Module level directives cause errors when bundled, "use client" in "node_modules/@tanstack/react-query/build/lib/QueryErrorResetBoundary.mjs" was ignored.
Module level directives cause errors when bundled, "use client" in "node_modules/@tanstack/react-query/build/lib/useIsFetching.mjs" was ignored.
Module level directives cause errors when bundled, "use client" in "node_modules/@tanstack/react-query/build/lib/useIsMutating.mjs" was ignored.
Module level directives cause errors when bundled, "use client" in "node_modules/@tanstack/react-query/build/lib/useInfiniteQuery.mjs" was ignored.
Module level directives cause errors when bundled, "use client" in "node_modules/@tanstack/react-query/build/lib/useMutation.mjs" was ignored.
Module level directives cause errors when bundled, "use client" in "node_modules/@tanstack/react-query/build/lib/isRestoring.mjs" was ignored.
Module level directives cause errors when bundled, "use client" in "node_modules/@tanstack/react-query-devtools/build/lib/devtools.mjs" was ignored.
Module level directives cause errors when bundled, "use client" in "node_modules/@tanstack/react-query/build/lib/reactBatchedUpdates.mjs" was ignored.
Module level directives cause errors when bundled, "use client" in "node_modules/@tanstack/react-query/build/lib/useSyncExternalStore.mjs" was ignored.
Module level directives cause errors when bundled, "use client" in "node_modules/@tanstack/react-query/build/lib/errorBoundaryUtils.mjs" was ignored.
Module level directives cause errors when bundled, "use client" in "node_modules/@tanstack/react-query/build/lib/useBaseQuery.mjs" was ignored.
Module level directives cause errors when bundled, "use client" in "node_modules/@tanstack/react-query-devtools/build/lib/theme.mjs" was ignored.
Module level directives cause errors when bundled, "use client" in "node_modules/@tanstack/react-query-devtools/build/lib/Explorer.mjs" was ignored.

[rodolfocerezo]

As @Ephem said, we can add the following in our rollup options:

onwarn(warning, warn) {
  if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
    return
  }
  warn(warning)
}

[duypham90]

I got many error warning when build production with React + Vite v4.2.1
Not use NextJS

[Ephem]

As an update to anyone reading this, the Vite React-plugin will soon silence this warning by default. This is not available in a stable release yet, but is in the 4.0.0-beta.0 release.

Thanks a lot to @ArnaudBarre for adding the fix and @thebuilder for reporting it over there! 👏

[thebuilder]

Sounds good 👌