## Problem/Motivation Code components (`js_component`) created or edited **programmatically** — e.g. by the AI tools in `canvas_ai` — render as `[object Object]` in the editor preview and on the page. They never hydrate. ## Cause `canvas_ai` stores the source JSX but leaves the compiled JS empty: - `modules/canvas_ai/src/Plugin/AiFunctionCall/CreateComponent.php` → `"compiledJs" => ""` - `modules/canvas_ai/src/Plugin/AiFunctionCall/EditComponentJs.php` → `"compiledJs" => ""` Code components are normally compiled in the **browser** editor (swc/wasm) on save, which sets `compiledJs`. The programmatic path skips that, so `JavaScriptComponent::getJs()` (served by `ApiConfigAutoSaveControllers::getJs`, fetched by `<canvas-island component-url=...>`) returns an empty body. With no component JS, the island shows its fallback text → `[object Object]`. Reproduced on Drupal 11.3, Canvas 1.7.0: an AI-created Eyebrow component has `js.original` populated but `js.compiled` empty; the island shows `[object Object]`. Manually saving the component once in the code editor (browser compile) fixes that single component. ## Steps to reproduce 1. Use the Canvas AI assistant to create a code component (e.g. "Create a component named Eyebrow ..."). 2. Place it on a page (or open its preview). 3. It renders `[object Object]` instead of the component. ## Proposed resolution Compile the JSX **server-side** when storing `compiledJs` in `CreateComponent`/`EditComponentJs`, matching the in-browser build (automatic JSX runtime → `react/jsx-runtime`, imports kept). A minimal approach pipes the source through esbuild: ``` esbuild --loader=jsx --jsx=automatic --format=esm ``` (esbuild is already present in the Canvas/Drupal Node toolchain; graceful fallback to `""` when unavailable.) Alternatively reuse `getFallbackCompiledJs()` (see #3591072) if it is intended to cover this path. ## Related - #3591072 getFallbackCompiledJs() returns malformed JS (fixed) - #3586805 Compile local JSX imports with the automatic JSX runtime (CLI) --- AI usage disclosure (per https://www.drupal.org/docs/develop/issues/issue-procedures-and-etiquette/policy-on-the-use-of-ai-when-contributing-to-drupal): AI-Generated: Yes — the analysis and proposed patch were drafted with AI (Claude) assistance; I, Rajab Natshah, reviewed, tested on Drupal 11.3 / Canvas 1.7.0, and take full responsibility for correctness, security, and GPL compatibility.