Compile local JSX imports with the automatic JSX runtime
>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3586805. --> Reported by: [balintbrews](https://www.drupal.org/user/613760) Related to !983 >>> <h3 id="overview">Overview</h3> <p>React components that are not created as Canvas components can fail at runtime after being pushed to Canvas when they use JSX without importing <code>React</code>. This affects supporting components outside the configured components directory, such as files in <code>src/lib</code> or <code>src/icons</code>, that do not have a <code>component.yml</code> metadata file and are imported by Canvas components through local alias imports.</p> <p>Reproduction steps:</p> <ol> <li>Create a local React component outside the Canvas components directory, such as <code>src/lib/Example.jsx</code>, with JSX and no <code>import React from 'react'</code>.</li> <li>Import it from a Canvas component through an alias import, such as <code>@/lib/Example.jsx</code>.</li> <li>Run the Canvas CLI push/build flow.</li> <li>Use the Canvas component in Canvas.</li> </ol> <p>The generated local import artifact can contain <code>React.createElement(...)</code> without importing <code>React</code>, which causes <code>React is not defined</code> at runtime. Canvas component entry files already use the automatic JSX runtime, so this only affects supporting React components bundled through the Vite local import path.</p> <h3 id="proposed-resolution">Proposed resolution</h3> <p>Configure the shared Vite build config used for local alias imports to use the automatic JSX runtime.</p> <h3 id="ui-changes">User interface changes</h3> <p>n/a</p>
issue