Storybook: fix Emotion jsxImportSource

[simison]

What?

Pre-bundle CJS deps so Vite exposes a default export for Emotion.

In trunk running npm run storybook:e2e:dev was broken:

Why?

How?

Testing Instructions

Run npm run storybook:e2e:dev
Confirm it loads.

Testing Instructions for Keyboard

Use of AI Tools

completely

[simison]

I didn't have time to bisect which commit broke this, but I saw some Emotion related PRs from @ciampo so likely one of those? Anyway, this fixes it.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: simison <simison@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Size Change: 0 B

Total Size: 7.73 MB

_{compressed-size-action}

[ciampo]

@simison, rather than posting a comment with a convoluted explanation, I just pushed a follow-up with a different approach.

The absolute Emotion path was bypassing Vite’s normal package resolution, which caused Emotion to be loaded through two different module paths. Restoring the regular @emotion/react package import lets Vite optimize it normally and keeps a single shared Emotion instance.

[ciampo]

If the fix works for you too, feel free to merge this PR 🚀

[simison]

Great! I didn't have time yet to dig into this at all, glad it's sorted and better now :)

[github-actions]

Flaky tests detected in 4ea310a.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/29615484072
📝 Reported issues:

• [Flaky Test] should insert media, convert to blocks, and undo in one step #36123 in /test/e2e/specs/editor/blocks/classic.spec.js
• [Flaky Test] should update the HTML only for the latest navigation #78835 in /test/e2e/specs/interactivity/router-navigate.spec.ts

[manzoorwanijk]

With this change, we will need to set an alias for this; otherwise, it will break the isolated build.

diff --git a/storybook/main.ts b/storybook/main.ts
index 36358c13df1..fd266c7de2c 100644
--- a/storybook/main.ts
+++ b/storybook/main.ts
@@ -224,6 +224,16 @@ const config: StorybookConfig = {
 				),
 			},
 			resolve: {
+				alias: {
+					/*
+					 * `jsxImportSource` injects `@emotion/react` into every JSX
+					 * file, including stories in packages that don't depend on
+					 * it (e.g. block-editor) and can't resolve it under the
+					 * isolated dependency layout. Alias it to this workspace's
+					 * copy — the one all consumers already resolve to.
+					 */
+					'@emotion/react': getAbsolutePath( '@emotion/react' ),
+				},
 				/*
 				 * Resolve Storybook packages from this workspace.
 				 */

[aduth]

Better yet: We can remove this altogether? 🙂 #80647