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:

  1. Create a component with a mocks.json file so preview-build generates component-mock-01.html.
  2. Add another previewable discovered component with a .jsx entry file that uses top-level JSX without importing React, for example:
    const badge = <span>Logo</span>;
    
    export default function Logo() {
      return badge;
    }
    
  3. Run canvas-workbench preview-build --component-path <component.yml> --out-dir <dir>.
  4. Open the generated component-mock-01.html.
  5. 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

Command icon 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

balintbrews created an issue. See original summary.

  • balintbrews committed d7e56bd7 on 1.x
    fix(CLI Tool): #3586971 Apply the React JSX transform consistently in...
balintbrews’s picture

Assigned: balintbrews » Unassigned
Status: Active » Fixed

Published @drupal-canvas/workbench@0.4.2.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.