>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3586971. --> Reported by: [balintbrews](https://www.drupal.org/user/613760) Related to !989 >>> <h3 id="overview">Overview</h3> <p>The <code>preview-build</code> command of <code>@drupal-canvas/workbench</code> can generate component mock HTML that fails at runtime with <code>ReferenceError: React is not defined</code>.</p> <p>The failure is caused by the standalone mock export bundling path compiling some discovered JSX component entries to <code>React.createElement(...)</code> without applying the same React JSX transform as the main Workbench app.</p> <p>A consistent reproduction is:</p> <ol> <li>Create a component with a <code>mocks.json</code> file so <code>preview-build</code> generates <code>component-mock-01.html</code>.</li> <li> <div>Add another previewable discovered component with a <code>.jsx</code> entry file that uses top-level JSX without importing <code>React</code>, for example: <pre><pre>const badge = &lt;span&gt;Logo&lt;/span&gt;;<br><br>export default function Logo() {<br>&nbsp; return badge;<br>}</pre></pre></div> </li> <li>Run <code>canvas-workbench preview-build --component-path &lt;component.yml&gt; --out-dir &lt;dir&gt;</code>.</li> <li>Open the generated <code>component-mock-01.html</code>.</li> <li>The page fails at runtime with <code>ReferenceError: React is not defined</code>.</li> </ol> <p>This affects mock exports because they bundle all discovered previewable component sources, not only the selected component. As a result, an unrelated discovered JSX component can break the exported mock HTML.</p> <h3 id="proposed-resolution">Proposed resolution</h3> <p>Update the standalone interactive preview bundler used by <code>preview-build</code> to include the React Vite plugin, so exported preview HTML uses the same JSX transform behavior as the main Workbench app.</p> <h3 id="ui-changes">User interface changes</h3> <p>n/a</p>