Skip to content

[floating-ui-react] Duplicate "options" key in arrow middleware causes esbuild warning when bundled #5594

Description

@wangxu-dev

Bug report

Current behavior

When server-side bundles that include @base-ui/react popup positioning (Tooltip, PreviewCard, Menu, etc.) are re-bundled by esbuild (e.g. Cloudflare Wrangler during OpenNext/Workers deploy), esbuild emits:

▲ [WARNING] Duplicate key "options" in object literal [duplicate-object-key]

    handler.mjs:...:
      ...{name:"arrow",options:l2,async fn(...){...},...,options:[l2,m2]}...
           ╵                               ~~~~~~~
  The original key "options" is here:
      ...{name:"arrow",options:l2,async fn(...){...
           ╵                               ~~~~~~~

The warning comes from the forked React middleware wrapper in:

packages/react/src/floating-ui-react/middleware/arrow.ts

export const arrow = (options, deps) => ({
  ...baseArrow(options),   // includes `options`
  options: [options, deps], // duplicate key after spread is flattened
});

Runtime behavior appears fine (last key wins), but CI/deploy logs show a warning on every deploy for apps that bundle these components into a Worker.

Expected behavior

Middleware objects should not contain duplicate keys after bundling. Upstream Floating UI fixed the same pattern in floating-ui/floating-ui#3444 by returning { name, fn, options } explicitly instead of spreading the base middleware object.

Reproducible example

  1. Use @base-ui/react components that rely on floating positioning (e.g. Tooltip).
  2. Build with OpenNext for Cloudflare Workers (opennextjs-cloudflare build).
  3. Deploy with Wrangler (opennextjs-cloudflare deploy).

The warning appears during Wrangler's esbuild step on the generated handler.mjs.

Minimal source reference (published package matches repo):

node_modules/@base-ui/react/floating-ui-react/middleware/arrow.js

Base UI version

@base-ui/react v1.7.0 (latest at time of report). Same code exists on master in packages/react/src/floating-ui-react/middleware/arrow.ts.

Which browser are you using?

N/A (build-time / bundler warning)

Which OS are you using?

Linux (Cloudflare Workers Builds)

Which assistive tech are you using (if applicable)?

N/A

Additional context

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions