Addon Docs: Dynamically import rehype

[valentinpalkovic]

Closes #29467

What I did

I have rewritten rehype imports to dynamic imports so that the import doesn't break in CJS environments.

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-29544-sha-fd7f82f1. 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-29544-sha-fd7f82f1
Triggered by	@valentinpalkovic
Repository	storybookjs/storybook
Branch	valentin/dynamic-import-of-rehype
Commit	fd7f82f1
Datetime	Tue Nov 5 11:21:27 UTC 2024 (1730805687)
Workflow run	11683115704

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=29544

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	78.2 MB	78.2 MB	0 B	1.16	0%
initSize	143 MB	143 MB	3.6 kB	1.19	0%
diffSize	65.1 MB	65.1 MB	3.6 kB	1.29	0%
buildSize	6.88 MB	6.88 MB	0 B	1.12	0%
buildSbAddonsSize	1.51 MB	1.51 MB	0 B	-	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.9 MB	1.9 MB	0 B	1.11	0%
buildSbPreviewSize	271 kB	271 kB	0 B	-	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.88 MB	3.88 MB	0 B	1.11	0%
buildPreviewSize	3 MB	3 MB	0 B	1.11	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	6.5s	20.3s	13.7s	0.92	67.7%
generateTime	19.5s	19.7s	148ms	-0.7	0.8%
initTime	13.5s	13.9s	425ms	-0.84	3%
buildTime	8.1s	9.1s	981ms	0.1	10.7%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	5.5s	5.6s	163ms	-0.52	2.9%
devManagerResponsive	3.5s	3.3s	-176ms	-0.93	-5.2%
devManagerHeaderVisible	473ms	517ms	44ms	-0.88	8.5%
devManagerIndexVisible	500ms	551ms	51ms	-1.12	9.3%
devStoryVisibleUncached	602ms	1.1s	511ms	0.31	45.9%
devStoryVisible	499ms	550ms	51ms	-1.03	9.3%
devAutodocsVisible	467ms	481ms	14ms	-0.63	2.9%
devMDXVisible	450ms	501ms	51ms	-0.39	10.2%
buildManagerHeaderVisible	631ms	503ms	-128ms	-0.87	-25.4%
buildManagerIndexVisible	648ms	523ms	-125ms	-0.78	-23.9%
buildStoryVisible	630ms	501ms	-129ms	-0.89	-25.7%
buildAutodocsVisible	477ms	412ms	-65ms	-0.93	-15.8%
buildMDXVisible	478ms	414ms	-64ms	-0.77	-15.5%

Greptile Summary

Modified the import method for rehype plugins in MDX-related files to use dynamic imports instead of static imports, improving CommonJS environment compatibility.

• Changed static imports to dynamic imports using await import() in code/addons/docs/src/plugins/mdx-plugin.ts
• Updated rehype plugin imports in code/addons/docs/src/preset.ts to use dynamic imports
• Resolves issue [Bug]: Error [ERR_REQUIRE_ESM]: require() of ES Module at @storybook/addon-docs #29467 where ESM modules were causing errors in CommonJS environments
• Maintains existing functionality while ensuring compatibility across module systems

[greptile-apps]

_{2 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings | Greptile}

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit fd7f82f. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected -t check -c production --parallel=7
• nx run-many -t build -c production --parallel=3

---

Sent with 💌 from NxCloud.