Overview
The preview-build command of @drupal-canvas/workbench can generate component mock HTML that fails at runtime with ReferenceError: React is not defined.
The failure is caused by the standalone mock export bundling path compiling some discovered JSX component entries to React.createElement(...) without applying the same React JSX transform as the main Workbench app.
A consistent reproduction is:
- Create a component with a
mocks.jsonfile sopreview-buildgeneratescomponent-mock-01.html. -
Add another previewable discovered component with a
.jsxentry file that uses top-level JSX without importingReact, for example:const badge = <span>Logo</span>; export default function Logo() { return badge; } - Run
canvas-workbench preview-build --component-path <component.yml> --out-dir <dir>. - Open the generated
component-mock-01.html. - The page fails at runtime with
ReferenceError: React is not defined.
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.
Proposed resolution
Update the standalone interactive preview bundler used by preview-build to include the React Vite plugin, so exported preview HTML uses the same JSX transform behavior as the main Workbench app.
User interface changes
n/a
Issue fork canvas-3586971
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #4
balintbrewsPublished
@drupal-canvas/workbench@0.4.2.