use client was ignored while building the app for production using Vitejs.

[M-o-h-a-n-S-i-n-g-h]

Hey Folks, hope you are doing well.

I am building an admin dashboard using React which use Vite.js and React-Query. I'm getting the below error when I run the build command

transforming (71) node_modules/antd/es/tabs/index.jsModule 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.
transforming (93) node_modules/@tanstack/react-query/build/lib/QueryErrorResetBoundary.mjsModule 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.
transforming (294) node_modules/antd/es/upload/Dragger.jsModule 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.

These are the version numbers of the packages I'm using,

"@tanstack/react-query": "^4.28.0"
"react": "^17.0.2",
"vite": "^4.2.2"

Vite Config

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'src'),
      path: 'rollup-plugin-node-polyfills/polyfills/path',
      process: 'rollup-plugin-node-polyfills/polyfills/process-es6'
    },
    server: {
      port: 3000
    },
  },
  build: {
    // minify: 'terser'
  },
  include: [
    '@ant-design/colors',
    '@ant-design/icons',
  ],
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: 'window'
      }
    }
  },
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          '@primary-color': '#27AE60',
          '@drawer-title-font-size': '24px',
          '@layout-sider-background': '#5D6166',
          '@card-head-padding': '8px',
          '@card-padding-base': '16px',
          '@form-vertical-label-padding': '0',
          '@input-placeholder-color': 'var(--primary-color)'
        },
        javascriptEnabled: true
      }
    }
  }
})

[TkDodo]

we have a lot of discussions / issues on that topic already. please use the search function:

• Warning with use client directive with Vite #5175
• Module level directives cause errors when bundled, "use client" #5216
• Module level directives cause errors when bundled #5220