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 👌

[nemonemi]

I can still see it with version 4.1.0.

[ljmerza]

im not even using react-query and i get this error on latest vite

[noherczeg]

I'm using Vite 4.5.0 + @vitejs/plugin-react 4.1.0 and the warnings are gone.

[derekdavenport]

It's possible another plugin is overwriting the warning handler. That was the case for me with node polyfill plugin (fixed now). So maybe try removing other plugins to see if the warnings go away.

[KholdStare]

@derekdavenport I'm still seeing the same issue with node polyfill plugin, with latest versions of everything: davidmyersdev/vite-plugin-node-polyfills#49

[bogdancss]

vite: 4.5.0
@vitejs/plugin-react: 4.1.0
vite-plugin-node-polyfills: 0.15.0

We are still getting the warnings with these versions

[ArnaudBarre]

Yeah this is coming from vite-plugin-node-polyfills, I sent a fix: davidmyersdev/vite-plugin-node-polyfills#53

[Omobayode6]

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

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

Which file am I going to add this?

[MuhammadHasher017]

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

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

Which file am I going to add this?

export default defineConfig({
  build: {
    chunkSizeWarningLimit: 100,
    rollupOptions: {
      onwarn(warning, warn) {
        if (warning.code === "MODULE_LEVEL_DIRECTIVE") {
          return;
        }
        warn(warning);
      },
    },
  },
  plugins: [react()],
  resolve: {
    alias: {
      "@": "/src",
    },
  },
});

You can add it in vite.config.js like that.

[sean080597]

I resolved my problem

1. Ensure your package.json contains "type": "module".
2. Update Vite versions in package.json:
   "@vitejs/plugin-react": "^4.3.2"
"laravel-vite-plugin": "^1.0.5"
"vite": "^5.4.9"
"vite-plugin-node-polyfills": "^0.22.0"

Refer links: https://github.com/laravel/vite-plugin/blob/1.x/UPGRADE.md

[mariusbutuc]

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

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

For some reason, using Rollup's onwarn handler didn't have the expected outcome in our case. Looking at Vite's docs on customizing the build and the underlying Rollup options, we got the expected outcome by adapting the example to use the onLog handler instead:

onLog(level, log, handler) {
  if (log.code === "MODULE_LEVEL_DIRECTIVE") {
    return;
  }
  handler(level, log);
},