build react component emit bundles with import statement/

Hi, I'm trying build my react component for hydration for ssr.
but my bundled file includes import statement with relative path, which needs entire node_modules folder placed in server.

how can I bundle appropriately ?

this is my esbuild config

const clientConfig ={
  bundle: true,
  entryPoints: ['src/entry-client.tsx'],
  platform: "browser",
  outfile: 'dist/main.js',
  format: "esm",
  loader: {
    '.js': 'jsx',
    '.ts': 'tsx',
    '.tsx': 'tsx',
  },
  // minify: true,
  external: Object.keys(dependencies),
  plugins: [
    {
      name: 'make-all-packages-external',
      setup(build) {
        let filter = /^[^./]|^\.[^./]|^\.\.[^/]/; // Must not start with "/" or "./" or "../"
        build.onResolve({ filter }, args => ({
          external: true,
          path: args.path,
        }));
      },
    },
  ],
  sourcemap: true,
}


build(clientConfig)

and then here is bundled file name main.js

(() => {
  var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
    get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
  }) : x)(function(x) {
    if (typeof require !== "undefined")
      return require.apply(this, arguments);
    throw new Error('Dynamic require of "' + x + '" is not supported');
  });

  // src/entry-client.tsx
  var import_client = __require("react-dom/client");
  var import_react_router_dom2 = __require("react-router-dom");

  // src/App.tsx
  var import_react_router_dom = __require("react-router-dom");

  // src/routes.ts
  var import_glob = __require("glob");
  var PagePathsWithComponents = (0, import_glob.sync)("./src/page/*.tsx");
  console.log("PagePathsWithComponents: ", PagePathsWithComponents);
  console.log({ PagePathsWithComponents });
  var routes = PagePathsWithComponents.map((path) => {
    const name = path.match(/\.\/pages\/(.*)\.tsx$/)[1];
    return {
      name,
      path: name === "Home" ? "/" : `/${name.toLowerCase()}`,
      component: PagePathsWithComponents[path].default
    };
  });
  var routesMap = routes.reduce((acc, cur) => {
    console.log("acc, cur", acc, cur);
    acc.set(cur.path, cur);
    return acc;
  }, /* @__PURE__ */ new Map());

  // src/App.tsx
  var import_jsx_runtime = __require("react/jsx-runtime");
  var App = () => {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("html", { children: [
      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("head", { children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meta", { charSet: "utf-8" }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: "my App" })
      ] }),
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("body", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Routes, { children: Array.from(routesMap.values()).map(({ name, path, component: Element }) => {
        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Route, { path, element: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Element, {}) }, name);
      }) }) })
    ] });
  };

  // src/entry-client.tsx
  var import_jsx_runtime2 = __require("react/jsx-runtime");
  (0, import_client.hydrateRoot)(
    document,
    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_router_dom2.BrowserRouter, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(App, {}) })
  );
})();
//# sourceMappingURL=main.js.map

Start by reviewing the supplied esbuild configuration and the entry points src/entry-client.tsx, src/App.tsx, and src/routes.ts, then reproduce the build that generates dist/main.js. Compare the generated bundle with the requested SSR hydration behavior and determine which imports remain external. Done means the documented build output matches the intended deployment without requiring the full node_modules tree.