next.js: Storybook build fails with cannot find module error

Link to the code that reproduces this issue

https://github.com/tnyo43/storybook-next13-5-1

To Reproduce

  1. clone the reproduce repository. The version of Next.js is 13.5.1.
  2. run pnpm install & pnpm storybook_build, then you will find that it fails
  3. down grade Next.js to an old version (v13.4.9). just run git revert HEAD
  4. run same command, pnpm install & pnpm storybook_build, the build process should success

This is the message of the error that occurred when executing with v13.5.1.

> storybook build

@storybook/cli v7.4.2

info => Cleaning outputDir: /storybook-static
info => Loading presets
info => Building manager..
info => Manager built (54 ms)
info => Compiling preview..
info => Copying static files: /path/to/storybook-next13-5-1/node_modules/.pnpm/@storybook+manager@7.4.2/node_modules/@storybook/manager/static at /path/to/storybook-next13-5-1/storybook-static/sb-common-assets
info => Using implicit CSS loaders
Error: Cannot find module 'next/dist/shared/lib/router-context'
Require stack:
- ./node_modules/.pnpm/@storybook+nextjs@7.4.2_@swc+core@1.3.86_@types+react-dom@18.2.7_@types+react@18.2.22_esbuild_g77ux53pi2nwrr6aeg2ecsyahu/node_modules/@storybook/nextjs/dist/preset.js
- ./node_modules/.pnpm/@storybook+core-common@7.4.2/node_modules/@storybook/core-common/dist/index.js
- ./node_modules/.pnpm/@storybook+telemetry@7.4.2/node_modules/@storybook/telemetry/dist/index.js
- ./node_modules/.pnpm/@storybook+cli@7.4.2/node_modules/@storybook/cli/dist/generate.js
- ./node_modules/.pnpm/@storybook+cli@7.4.2/node_modules/@storybook/cli/bin/index.js
- ./node_modules/.pnpm/storybook@7.4.2/node_modules/storybook/index.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at Function.resolve (node:internal/modules/cjs/helpers:116:19)
    at scopedResolve (./node_modules/.pnpm/@storybook+nextjs@7.4.2_@swc+core@1.3.86_@types+react-dom@18.2.7_@types+react@18.2.22_esbuild_g77ux53pi2nwrr6aeg2ecsyahu/node_modules/@storybook/nextjs/dist/preset.js:1:9988)
    at addScopedAlias (./node_modules/.pnpm/@storybook+nextjs@7.4.2_@swc+core@1.3.86_@types+react-dom@18.2.7_@types+react@18.2.22_esbuild_g77ux53pi2nwrr6aeg2ecsyahu/node_modules/@storybook/nextjs/dist/preset.js:1:9703)
    at configureRouting (./node_modules/.pnpm/@storybook+nextjs@7.4.2_@swc+core@1.3.86_@types+react-dom@18.2.7_@types+react@18.2.22_esbuild_g77ux53pi2nwrr6aeg2ecsyahu/node_modules/@storybook/nextjs/dist/preset.js:1:13928)
    at Object.webpackFinal (./node_modules/.pnpm/@storybook+nextjs@7.4.2_@swc+core@1.3.86_@types+react-dom@18.2.7_@types+react@18.2.22_esbuild_g77ux53pi2nwrr6aeg2ecsyahu/node_modules/@storybook/nextjs/dist/preset.js:1:29114)
    at async Object.webpack (./node_modules/.pnpm/@storybook+builder-webpack5@7.4.2_@types+react-dom@18.2.7_@types+react@18.2.22_esbuild@0.18.2_hh7vtay7i4n4n6b5zbu4pc433i/node_modules/@storybook/builder-webpack5/dist/presets/custom-webpack-preset.js:1:3214)
    at async builder (./node_modules/.pnpm/@storybook+builder-webpack5@7.4.2_@types+react-dom@18.2.7_@types+react@18.2.22_esbuild@0.18.2_hh7vtay7i4n4n6b5zbu4pc433i/node_modules/@storybook/builder-webpack5/dist/index.js:1:6703)
    at async Module.build (./node_modules/.pnpm/@storybook+builder-webpack5@7.4.2_@types+react-dom@18.2.7_@types+react@18.2.22_esbuild@0.18.2_hh7vtay7i4n4n6b5zbu4pc433i/node_modules/@storybook/builder-webpack5/dist/index.js:1:8663)
    at async Promise.all (index 0)
    at async buildStaticStandalone (./node_modules/.pnpm/@storybook+core-server@7.4.2/node_modules/@storybook/core-server/dist/index.js:97:4608)
    at async withTelemetry (./node_modules/.pnpm/@storybook+core-server@7.4.2/node_modules/@storybook/core-server/dist/index.js:101:4155)
    at async build (./node_modules/.pnpm/@storybook+cli@7.4.2/node_modules/@storybook/cli/dist/generate.js:471:1059)
    at async Command.<anonymous> (./node_modules/.pnpm/@storybook+cli@7.4.2/node_modules/@storybook/cli/dist/generate.js:474:125)
 ELIFECYCLE  Command failed with exit code 1

Current vs. Expected behavior

The build process should success with the latest version, but not at the moment

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:22:05 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6000
Binaries:
  Node: 18.15.0
  npm: 9.5.0
  Yarn: 1.22.19
  pnpm: 8.2.0
Relevant Packages:
  next: 13.5.1
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Additional context

No response

About this issue

  • Original URL
  • State: closed
  • Created 9 months ago
  • Reactions: 15
  • Comments: 30 (6 by maintainers)

Most upvoted comments

Storybook maintainer here – that’s right @MUJI-Okubo, thanks for linking the issue. Storybook uses some Next.js internals, which, once moved around/renamed, break Storybook’s integration. We are currently working on a fix and will release it as soon as possible.

+10
yannbf on Sep 20, 2023

This got fixed with @storybook/nextjs@7.4.3, but now I get

=> Failed to build the preview
Module not found: Error: Can't resolve 'react-dom/test-utils' in './node_modules/@testing-library/react/dist/@testing-library'
ModuleNotFoundError: Module not found: Error: Can't resolve 'react-dom/test-utils' in './node_modules/@testing-library/react/dist/@testing-library'
+8
DotCoyote on Sep 20, 2023

I’m still facing the issue with: next@13.5.3 storybook@7.4.5 @storybook/nextjs@7.4.5

+3
gvillenave on Sep 26, 2023

Ah that’s interesting… I’ve just checked and I am importing within from @storybook/testing-library in the two stories that use it, so my issue must be something else.

I’ll try using an alpha and see if it gives a clearer error message.

I’ve just installed the ESLint plugin, thanks for that tip Yann 😃

+2
philwolstenholme on Oct 9, 2023

I’m having the same issue as @Jonathan-Valladares upgrading doesn’t work

+2
Diegodsha on Sep 26, 2023

I found the root cause of the error below: Error: Can't resolve 'react-dom/test-utils' in '...node_modules/@testing-library/react/dist/@testing-library'

The default Webpack configuration of Storybook resolves react-dom to @storybook/react-dom-shim, which doesn’t have a shim for test-utils. I managed to resolve this by overriding the Webpack config in .storybook/main:

  webpackFinal: async (config) => {
    config.resolve = config.resolve || {};
    config.resolve.alias = config.resolve.alias || {};
    config.resolve.alias["@testing-library/react"] = "@storybook/testing-library";
// OR
	config.resolve.alias["react-dom"] = "react-dom";
    return config;
  },

I think the right fix here would be to add a test-utils shim in @storybook/react-dom-shim, I’m opening an issue in the Storybook repo for that.

+1
gvillenave on Oct 11, 2023

@philwolstenholme SO, i ran the same config for storybook on 2 different projects in a monorepo, one works, one fails (also: they have the same deps for react testing library / react dom). I suppose at this point there is something within the failing repo that breaks, but the error we are getting is not really a valid hint.

UPDATE: Moving to storybook’s latest canary (7.5.0 alpha 4) helped as the error message was a bit clearer. The issue in my case was an internal helper referencing react testing library that was in the same package as some other helpers i am using in storybook. Bottom line: if you have this error try to install the alpha version and see if you get a clearer error message from it.

+1
telriot on Oct 6, 2023

@telriot the Next and Storybook version on https://storybook.new is working fine, so I think our issue might be related to something like:

  • our Next config
  • a Storybook extension we have installed
  • our Storybook config
  • our Webpack config

Presumably you, me, and the other people affected are all using the same plugin/copy-pasted config snippet etc

+1
philwolstenholme on Oct 5, 2023

I am also having the same issue as @philwolstenholme - the router-context issue only happened with previous versions and is actually fixed on the latest Next & SB versions, but the test-utils one seems to persist on all latest versions.

+1
telriot on Oct 5, 2023

Indeed what @sanalpanicker mentioned worked by upgrading all (addon) dependencies including Storybook to (pinned) 7.4.3 worked while I was using next@13.5.2. Another thing to watch out for is context provider and link router import hell in stories.

At least storybook builds!

+1
usrrname on Sep 26, 2023

coming here to say I too, experience this…

+1
usrrname on Sep 25, 2023

Hey @DotCoyote, I’m facing the exact same issue after upgrading to @storybook/nextjs@7.4.3 and Next.js v13.5.2. It seems there’s a discrepancy in how the newer version of Next.js is managing module paths, specifically around the react-dom/test-utils. Have you by any chance found a workaround solution?

+1
Jonathan-Valladares on Sep 25, 2023

Hey @balazsorban44! For sure, we are planning to set up a prerelease sandbox for Next.js, so things like this are caught faster. It would be fantastic if there was a development layer we could hook into, instead of reimplementing each feature support, but that’s what we can do right now, with the risk of having breakages like this between minor or patch releases. Maybe in the future things can be smoother!

@DotCoyote can you continue this discussion here, and please add a reproduction so we can take a look? https://github.com/storybookjs/storybook/issues/24234 Thanks!

+1
yannbf on Sep 20, 2023

I believe this is the same issue as the one reported in the following Storybook issue: https://github.com/storybookjs/storybook/issues/24234

+1
MUJI-Okubo on Sep 20, 2023
Read more comments on GitHub
← next.js: staticGenerationBailout causes non-dismissable error overlay in dev mode
next.js: Stuck on `Creating an optimized production build` forever when development server is running →