Warning with `use client` directive with Vite

hckhanh commented 1 year ago

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 commented 1 year ago

please see the discussion on the PR:

https://github.com/TanStack/query/pull/5161#issuecomment-1475871864

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

Ephem commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

Ephem commented 1 year ago

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 commented 1 year ago

Sounds good 👌

nemonemi commented 1 year ago

I can still see it with version 4.1.0.

ljmerza commented 1 year ago

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

noherczeg commented 1 year ago

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

derekdavenport commented 1 year ago

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 commented 1 year ago

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

bogdancss commented 1 year ago

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 commented 1 year ago

Yeah this is coming from vite-plugin-node-polyfills, I sent a fix: https://github.com/davidmyersdev/vite-plugin-node-polyfills/pull/53

Omobayode6 commented 7 months ago

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 commented 7 months ago

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 commented 4 weeks ago

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 commented 1 week ago

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);
},

TanStack / query