Storybook build fails with cannot find module error

[tnyo43]

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

[MUJI-Okubo]

I believe this is the same issue as the one reported in the following Storybook issue:
storybookjs/storybook#24234

[yannbf]

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.

[DotCoyote]

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'

[balazsorban44]

#55620 (comment)

as per this comment, this is not a Next.js issue, so closing.

@yannbf do you have next@canary tests in place? Might be worth having it so you can be prepared for such cases.

[yannbf]

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? storybookjs/storybook#24234
Thanks!

[Jonathan-Valladares]

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?

[DotCoyote]

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?

No, I'm not able to use storybook with this bug in my project atm

[usrrname]

coming here to say I too, experience this...

[gvillenave]

Same thing here:
Error: Can't resolve 'react-dom/test-utils' in '...node_modules/@testing-library/react/dist/@testing-library'

Interestingly this happens either when upgrading Next.js to 13.5 or when upgrading Storybook to 7.4.5 (and when upgrading both at the same time as well), so I don't think that this is purely a Storybook issue.

@balazsorban44 can we reopen this issue to track it on the Next.js side until we figure out what's happening?

[sanalpanicker]

Upgrading to the latest next and storybook resolved the issue.

[sanalpanicker]

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?

upgrade storybook to 7.4.5 and next to 13.5.3 fixed my issue

[gvillenave]

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

[usrrname]

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!

[Jonathan-Valladares]

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

At least storybook builds!

Are you guys referring to the issue with the react-dom/test-utils module, or the initial router-context issue covered earlier in this thread?

As @gvillenave pointed out, upgrading to next@13.5.3, storybook@7.4.5, and @storybook/nextjs@7.4.5 didn’t fix the error below on my end. 👇

ERROR in ./node_modules/@testing-library/react/dist/@testing-library/react.esm.js 1:0-50
   Module not found: Error: Can't resolve 'react-dom/test-utils' in '...node_modules/@testing-library/react/dist/@testing-library'

[gvillenave]

Correct, the react-dom/test-utils issue is what I'm referring to on the latest versions (I personally never encountered the router-context issue).

[Diegodsha]

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

[philwolstenholme]

@gvillenave @Jonathan-Valladares @DotCoyote did you get anywhere with the react-dom/test-utils issue? I'm still seeing that issue and I'm using Storybook 7.5.0-alpha.3 (run npx sb@next upgrade --prerelease) which is the release containing storybookjs/storybook#23671 and storybookjs/storybook#24239 – but perhaps those Storybook PRs aren't enough to fix the issue.

I wonder if we all have something specific in our Next config, Storybook config, or package.json that is causing this issue.

@yannbf I don't suppose you have any ideas what might cause this Next x Storybook issue? I'm seeing it even on Next 13.5.4 and Storybook 7.5.0-alpha.3.

[yannbf]

@philwolstenholme if you provide a reproduction link I'm happy to take a look.
You can find a Next.js stackblitz boilerplate at https://storybook.new/

[telriot]

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.

[philwolstenholme]

@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

[telriot]

@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.

[Jonathan-Valladares]

Thank you, @telriot! Your suggestion pointed me in the right direction. My problem stemmed from this line:

import { within } from '@testing-library/react';

I managed to resolve it by changing to:

import { within } from '@storybook/testing-library';

Thanks for the tip on the alpha version; it certainly provides clearer error messages!

[yannbf]

Great to know @Jonathan-Valladares! Storybook provides an eslint-plugin which actually has a rule to avoid users doing exactly what you found, with the wrong import of testing-library. You should check it out!

https://github.com/storybookjs/eslint-plugin-storybook

[philwolstenholme]

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 :)

[gvillenave]

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.

[philwolstenholme]

For me the issue was that we were wrapping our stories with a big 'context provider for tests' component, and we'd added a renderWithContextProviders test helper to the same file, and so an import of render from testing-library/react had snuck in and was causing trouble.

[akshayjai1]

npx sb@next upgrade --prerelease -- will install 7.5 version, which provides better error info.

in my case the error line was import {within} from '@testing-library/react'
which i changed to import {within} from '@storybook/testing-library'

I am using latest version of storybook and nextjs = (13.5.2)

so the error was that while loading storybook, we were trying to load testing library, while storybook also has its reference created for testing library

[valentinpalkovic]

The issue is resolved: storybookjs/storybook#24453. The fix will be released soon.

[gvillenave]

@valentinpalkovic that might resolve the issue with router-context, but it won't resolve the react-dom/test-utils one.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.