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
Used Package Manager
npm
Logs
No response
Validations
Describe the bug
Running
vite buildin 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-querylibrary: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?
See the following for more information on RSC and the issue:
use clientdirective with Vite TanStack/query#5175With 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 buildto trigger the buildSystem Info
Used Package Manager
npm
Logs
No response
Validations