React Native: Fix document reference error in open-in-editor when importing manager-api

[dannyhw]

Closes #
related to this:
storybookjs/react-native#795

What I did

Fixes an issue where react native storybook was crashing due to references to the document triggered by emotion web being loaded in storybook/theming

since this code isn't actually executed by RN then just moving it to be lazy loaded is enough to fix the crash.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-32572-sha-c9578275. Try it out in a new sandbox by running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information

Published version	0.0.0-pr-32572-sha-c9578275
Triggered by	@yannbf
Repository	storybookjs/storybook
Branch	dannyhw/feat/rn-fix-openeditor-document-reference-error
Commit	c9578275
Datetime	Fri Sep 26 18:25:01 UTC 2025 (1758911101)
Workflow run	18046073542

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=32572

Summary by CodeRabbit

• Refactor
  • Theme colors are now loaded during initialization rather than upfront, improving startup responsiveness.
  • Error/notification styling is unchanged and continues to display correctly.
  • Improves reliability when theming assets become available later.
  • No changes to public interfaces or user workflows.

[coderabbitai]

Walkthrough

Replaced the static top-level import of color from storybook/theming with a dynamic import('storybook/theming') inside the init routine, awaited before use. Notification rendering continues to reference color.negative from the dynamically loaded module. No exported/public API signatures were changed.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant M as Manager Module (open-in-editor)
  participant T as storybook/theming
  participant U as Notification UI

  Note over M: Dynamic import replaces previous static import

  M->>M: init()
  rect rgba(200, 220, 255, 0.25)
    note right of M: New/changed interaction
    M->>T: import('storybook/theming')
    activate T
    T-->>M: { color }
    deactivate T
  end
  M->>U: render notification using color.negative

  opt Async timing
    Note over M,U: Notification waits until theming is loaded
  end

Loading

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title succinctly describes the primary fix by specifying the React Native context, the module affected (open-in-editor), and the nature of the error (document reference when importing manager-api), making it clear and directly related to the main change in the PR.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch dannyhw/feat/rn-fix-openeditor-document-reference-error

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[dannyhw]

If someone could trigger a canary version then I could test to see if it works fully though I have already tested somewhat by editing in node_modules

[nx-cloud]

View your CI Pipeline Execution ↗ for commit c957827

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	50s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-09-26 18:23:39 UTC

[dannyhw]

the canary works for react native but something seems to be broken for the normal sandboxes