Next.js: Fix bundled react and react-dom in monorepos

[sentience]

What I did

In a pnpm monorepo with multiple Next.js projects, different projects can have different peerDependencies for Next.js, which causes pnpm to install multiple instances of the next package in the monorepo. In this situation, Storybook's webpack configuration could consume react from one instance of Next and react-dom from another, causing React render errors due to the mismatch.

This issue was caused by the configureConfig function adding webpack module aliases for react using addScopedAlias (which generates an alias with an absolute filesystem path pointing to the correct instance of next, e.g. '/path/to/next/dist/compiled/react'), but adding module aliases for react-dom using setAlias (which generates an alias with a relative path, e.g. 'next/dist/compiled/react-dom').

This would create a webpack configuration like this:

    alias: {
      ⋮
      react: '/Users/kyank/Developer/authentication-ui/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_@opentelemetry+api@1.8.0_@playwright+test@1.48.1_babel-plugin_z4uy3ayinaafvek4wmyon66ziu/node_modules/next/dist/compiled/react',
      ⋮
      'react-dom/test-utils': 'next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js',
      'react-dom$': 'next/dist/compiled/react-dom',
      'react-dom/client': 'next/dist/compiled/react-dom/client',
      'react-dom/server': 'next/dist/compiled/react-dom/server',
      ⋮
    },

This PR updates configureConfig to use addScopedAlias to create aliases with absolute filesystem paths for all of the Next.js-bundled React packages. This fixes the React rendering errors in our monorepo.

This issue seems to have been introduced in Storybook 8.3.0.

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

It doesn't look like @storybook/nextjs has any tests, so I'm not sure how to test this other than to confirm that this has resolved the issue in our own monorepo of Next.js projects.

Looks like there are some nextjs sandbox templates that we could use to verify manually that this doesn't break anything in Next.js Storybook projects, but I've been unable to figure out how to build and run that sandbox.

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/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 PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

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

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	78 MB	78 MB	0 B	4.35	0%
initSize	143 MB	143 MB	0 B	0.01	0%
diffSize	65.1 MB	65.1 MB	0 B	-0.33	0%
buildSize	6.87 MB	6.87 MB	0 B	0.43	0%
buildSbAddonsSize	1.51 MB	1.51 MB	0 B	0.35	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.9 MB	1.9 MB	0 B	0.43	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	0.43	0%
buildPreviewSize	3 MB	3 MB	0 B	-	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	23.3s	22s	-1s -283ms	0.77	-5.8%
generateTime	29.3s	19.1s	-10s -183ms	-1.47	🔰-53.1%
initTime	17.4s	13.3s	-4s -94ms	-1.46	🔰-30.7%
buildTime	10.5s	10.1s	-416ms	0.94	-4.1%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	5.6s	6.7s	1.1s	0.95	16.6%
devManagerResponsive	3.6s	4.3s	737ms	1	16.9%
devManagerHeaderVisible	539ms	645ms	106ms	0.15	16.4%
devManagerIndexVisible	609ms	722ms	113ms	0.25	15.7%
devStoryVisibleUncached	621ms	1.3s	721ms	0.91	53.7%
devStoryVisible	566ms	721ms	155ms	0.33	21.5%
devAutodocsVisible	464ms	615ms	151ms	0.58	24.6%
devMDXVisible	446ms	560ms	114ms	0.03	20.4%
buildManagerHeaderVisible	535ms	634ms	99ms	0.24	15.6%
buildManagerIndexVisible	546ms	676ms	130ms	0.55	19.2%
buildStoryVisible	537ms	632ms	95ms	0.24	15%
buildAutodocsVisible	432ms	519ms	87ms	0.12	16.8%
buildMDXVisible	443ms	487ms	44ms	-0.28	9%

Greptile Summary

This PR modifies the Next.js framework configuration in Storybook to ensure consistent absolute paths for React and ReactDOM dependencies, addressing rendering issues in pnpm monorepo setups.

• Updated code/frameworks/nextjs/src/config/webpack.ts to use addScopedAlias for all React-related aliases
• Replaced setAlias with addScopedAlias for ReactDOM-related aliases to generate absolute filesystem paths
• Ensures consistent React version usage across different Next.js projects with varying peer dependencies
• Resolves potential React rendering errors caused by mismatched React versions in monorepo setups
• Fixes an issue introduced in Storybook 8.3.0 related to webpack module aliases

[greptile-apps]

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

[sentience]

@valentinpalkovic Perhaps you could take a look at this? It looks like you introduced the setAlias calls that are causing problems in our monorepo, and I wonder if you're aware of any downside to replacing them with addScopedAlias calls instead as I have done here.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit e9ee80d. 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 1 target

• nx run-many -t build --parallel=3

---

Sent with 💌 from NxCloud.

[valentinpalkovic]

LGTM! CI is green. Let's merge it!