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

Handle "use client" warning #137

Closed
7 tasks done
thebuilder opened this issue Apr 1, 2023 · 0 comments · Fixed by #144
Closed
7 tasks done

Handle "use client" warning #137

thebuilder opened this issue Apr 1, 2023 · 0 comments · Fixed by #144
Labels
enhancement New feature or request

Comments

@thebuilder
Copy link

thebuilder commented Apr 1, 2023

Describe the bug

Running vite build in a project that includes a library, with components exported as "use client" directives, causes warnings to be shown in the build log.

E.g. adding the @tanstack/react-query library:

odule 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/useMutation.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/isRestoring.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.

There's nothing the user of a library can do to remove these warnings. More and more libraries are going implement the "use client", as users start using React Server Components.
I think Vite should make a decision on how to handle these, so they don't surface to user.

It can be "solved" by ignoring the warning - I'm thinking this could be added directly to the react plugin?

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

See the following for more information on RSC and the issue:

With Storybook 7 adding support for using Vite, people that migrate to that - even if otherwise using Webpack/Next.js - Will also start to see those warnings.

Reproduction

https://stackblitz.com/edit/vitejs-vite-nekn76?file=src%2FApp.jsx&terminal=dev

Steps to reproduce

Run npm run build to trigger the build

System Info

Not relevant

Used Package Manager

npm

Logs

No response

Validations

@ArnaudBarre ArnaudBarre added enhancement New feature or request and removed pending triage labels Apr 4, 2023
@github-actions github-actions bot locked and limited conversation to collaborators Apr 20, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants