Row component fails in Storybook with "React is not defined" error in Rush monorepo

[Crater-exe]

Bug Report

Description

The Row component from @lightningtv/solid/primitives throws "React is not defined" error when used in Storybook within a Rush monorepo, but works fine in standalone projects.

Environment

• @lightningtv/solid: 3.0.10
• @lightningjs/renderer: 3.0.0-beta21
• Storybook: 9.1.17 with storybook-solidjs-vite
• Rush monorepo with pnpm

Error

ReferenceError: React is not defined
at Row (Row.tsx:32:3)

Reproduction

1. Works: Clone lightning-tv/solid-starter-template, add Row to Storybook → works perfectly
2. Fails: Same Row component in Rush monorepo with pnpm → React error

Root Cause Analysis

Rush + pnpm hoists Storybook's React dependencies to shared common/temp/node_modules/.pnpm/. The Row component appears to detect React's presence and tries to use it, but fails because React 19 has no default export.

Configuration Attempted

• React shim aliases
• optimizeDeps exclusions
• Multiple Vite configurations
• Package version matching (App is using older versions and I tried upgrading to the latest)

The issue appears to be that @lightningtv/solid has conditional React usage that conflicts with hoisted React in monorepos.

Expected Behavior

Row component should work in monorepo environments without React conflicts.

[chiefcll]

I've seen this before.... If you could look into switching to this:

https://github.com/solidjs-community/storybook

Long story short is Storybook isn't supporting solidjs directly anymore so they forked it to provide the integration. I don't think I've fully updated the starter yet. But this should resolve your issue.

[Crater-exe]

The app currently uses the solid storybook fork, but I get this error for the Row component.

import type { Meta, StoryObj } from 'storybook-solidjs-vite';
import { PosterTile, PosterTileProps } from './Poster';
import { For } from 'solid-js';
import { getResource } from '@/index';
import { Row } from '@lightningtv/solid/primitives';

const meta: Meta<typeof PosterTile> = {
  title: 'Rotator Elements/Poster',
  component: PosterTile,
  tags: ['autodocs'],
  argTypes: {
    src: { control: 'text' },
    announce: { control: 'text' },
    withAds: { control: 'boolean' },
    requirePremium: { control: 'boolean' },
    contentBadge: { control: 'boolean' },
  },
  args: {
    src: getResource('placeholders/posterPlaceholder.png'),
    announce: 'Poster tile',
  },
};

export default meta;
type Story = StoryObj<typeof PosterTile>;

const storyTiles: PosterTileProps[] = [
  {
    src: getResource('placeholders/posterPlaceholder.png'),
    announce: 'Basic poster',
    withAds: false,
    requirePremium: false,
    contentBadge: false,
  },
  {
    src: getResource('placeholders/posterPlaceholder.png'),
    announce: 'Poster with ads',
    withAds: true,
    requirePremium: false,
    contentBadge: false,
  },
  {
    src: getResource('placeholders/posterPlaceholder.png'),
    announce: 'Premium poster',
    withAds: false,
    requirePremium: true,
    contentBadge: false,
  },
  {
    src: getResource('placeholders/posterPlaceholder.png'),
    announce: 'Poster with badge',
    withAds: false,
    requirePremium: false,
    contentBadge: true,
  },
];

export const Default: Story = {
  args: {
    src: getResource('placeholders/posterPlaceholder.png'),
    announce: 'Poster tile',
    withAds: false,
    requirePremium: false,
    contentBadge: false,
  },
  render: (args) => {
    return (
      <Row
        gap={40}
        autofocus
      >
        <For each={storyTiles}>
          {(props) => <PosterTile {...args} {...props} />}
        </For>
      </Row>
    );
  },
};