From 49d5f204f0ae180dcf4b3077bbe856679cef2553 Mon Sep 17 00:00:00 2001 From: Hariom Balhara Date: Wed, 24 Dec 2025 16:12:57 +0530 Subject: [PATCH] Add use client at the top and ignore warnings (#26184) --- packages/embeds/embed-react/vite.config.js | 24 +++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/embeds/embed-react/vite.config.js b/packages/embeds/embed-react/vite.config.js index df2a574b47..17731cc3ec 100644 --- a/packages/embeds/embed-react/vite.config.js +++ b/packages/embeds/embed-react/vite.config.js @@ -3,7 +3,7 @@ import path from "path"; import { defineConfig } from "vite"; import viteBaseConfig from "../vite.config"; - +const useClientBanner = '"use client";'; // https://vitejs.dev/config/ export default defineConfig({ ...viteBaseConfig, @@ -18,13 +18,35 @@ export default defineConfig({ // make sure to externalize deps that shouldn't be bundled // into your library external: ["react", "react/jsx-runtime", "react-dom", "react-dom/client"], + onwarn(warning, defaultHandler) { + // If "use client" directive has been added to the top of the file, then we can ignore the warnings related to it + if (useClientBanner) { + if ( + // vite-plugin-react also ignores this warning - https://github.com/vitejs/vite-plugin-react/blob/3748fc7493cf0a07a2ae275fbd1ae035f01010cc/packages/plugin-react/src/index.ts#L307-L323 + warning.code === 'MODULE_LEVEL_DIRECTIVE' && + warning.message.includes('use client') + ) { + return + } + // It comes due to use client directive being ignored in the middle of the file + // Even though this could happen in other cases, but there would always be another corresponding error logged which could still highlight any issue during build + if (warning.message?.includes("Can't resolve original location of error")) { + return + } + } + defaultHandler(warning) + }, output: { exports: "named", + // Add "use client" directive to the top of the bundle for Next.js App Router compatibility + // During bundling "use client" directive comes in b/w the file which is ignored/removed by Rollup because it makes sense at the top only + banner: useClientBanner, // Provide global variables to use in the UMD build // for externalized deps globals: { react: "React", "react-dom": "ReactDOM", + "react/jsx-runtime": "jsxRuntime", }, }, },