GitHub user Sagargupta16 added a comment to the discussion: Navbar disappears
when loading React Plugin (Airflow 3.1.x)
You're right, and my earlier answer was wrong: `appbuilder_views` is the legacy
FAB path, not AIP-68.
With `react_apps` the host already renders your page inside the layout.
`ExternalView.tsx` wraps it in a `Box` within `BaseLayout`, and
`ReactPlugin.tsx` imports `bundle_url` and renders the component it finds on
`globalThis.AirflowPlugin` (or `globalThis[<app name>]`). So the navbar only
disappears when the bundle mounts itself.
The usual cause is a bundle built as a Vite app instead of a library. The
Airflow UI's own `index.html` mounts on `<div id="root">`, so a bundle that
runs `createRoot(document.querySelector("#root")).render(...)` on load replaces
the whole UI, navbar included.
The working reference is `dev/react-plugin-tools` in the Airflow repo (`python
bootstrap.py my-plugin`). The template shows the shape the host expects:
- `src/main.tsx` default-exports the component and never calls `createRoot`
- `vite.config.ts` builds it with `build.lib` as UMD named `AirflowPlugin`,
with `react`, `react-dom`, `react-router-dom` and `react/jsx-runtime` as
externals so it shares the host's React
- `createRoot` lives only in `src/dev.tsx`, for local development
If your built `main.js` contains a `createRoot` call, that is the culprit. One
smaller thing: `category: "browser"` creates a new menu; `"browse"` puts it
under the existing Browse menu.
GitHub link:
https://github.com/apache/airflow/discussions/64149#discussioncomment-18787095
----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to: [email protected]
