Storybook build fails with cannot find module error #55620

tnyo43 · 2023-09-19T23:54:51Z

Link to the code that reproduces this issue

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

To Reproduce

clone the reproduce repository. The version of Next.js is 13.5.1.
run pnpm install & pnpm storybook_build, then you will find that it fails
down grade Next.js to an old version (v13.4.9). just run git revert HEAD
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/@[email protected]/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/@[email protected]_@[email protected]_@[email protected]_@[email protected]_esbuild_g77ux53pi2nwrr6aeg2ecsyahu/node_modules/@storybook/nextjs/dist/preset.js
- ./node_modules/.pnpm/@[email protected]/node_modules/@storybook/core-common/dist/index.js
- ./node_modules/.pnpm/@[email protected]/node_modules/@storybook/telemetry/dist/index.js
- ./node_modules/.pnpm/@[email protected]/node_modules/@storybook/cli/dist/generate.js
- ./node_modules/.pnpm/@[email protected]/node_modules/@storybook/cli/bin/index.js
- ./node_modules/.pnpm/[email protected]/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/@[email protected]_@[email protected]_@[email protected]_@[email protected]_esbuild_g77ux53pi2nwrr6aeg2ecsyahu/node_modules/@storybook/nextjs/dist/preset.js:1:9988)
    at addScopedAlias (./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected]_esbuild_g77ux53pi2nwrr6aeg2ecsyahu/node_modules/@storybook/nextjs/dist/preset.js:1:9703)
    at configureRouting (./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected]_esbuild_g77ux53pi2nwrr6aeg2ecsyahu/node_modules/@storybook/nextjs/dist/preset.js:1:13928)
    at Object.webpackFinal (./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected]_esbuild_g77ux53pi2nwrr6aeg2ecsyahu/node_modules/@storybook/nextjs/dist/preset.js:1:29114)
    at async Object.webpack (./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_hh7vtay7i4n4n6b5zbu4pc433i/node_modules/@storybook/builder-webpack5/dist/presets/custom-webpack-preset.js:1:3214)
    at async builder (./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_hh7vtay7i4n4n6b5zbu4pc433i/node_modules/@storybook/builder-webpack5/dist/index.js:1:6703)
    at async Module.build (./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_hh7vtay7i4n4n6b5zbu4pc433i/node_modules/@storybook/builder-webpack5/dist/index.js:1:8663)
    at async Promise.all (index 0)
    at async buildStaticStandalone (./node_modules/.pnpm/@[email protected]/node_modules/@storybook/core-server/dist/index.js:97:4608)
    at async withTelemetry (./node_modules/.pnpm/@[email protected]/node_modules/@storybook/core-server/dist/index.js:101:4155)
    at async build (./node_modules/.pnpm/@[email protected]/node_modules/@storybook/cli/dist/generate.js:471:1059)
    at async Command.<anonymous> (./node_modules/.pnpm/@[email protected]/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

The text was updated successfully, but these errors were encountered:

MUJI-Okubo · 2023-09-20T06:08:15Z

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

yannbf · 2023-09-20T08:36:40Z

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 · 2023-09-20T13:22:49Z

This got fixed with @storybook/[email protected], 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 · 2023-09-20T13:24:33Z

#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 · 2023-09-20T21:09:55Z

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 · 2023-09-25T14:43:19Z

Hey @DotCoyote, I'm facing the exact same issue after upgrading to @storybook/[email protected] 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 · 2023-09-25T15:14:11Z

Hey @DotCoyote, I'm facing the exact same issue after upgrading to @storybook/[email protected] 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 · 2023-09-25T20:04:22Z

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

gvillenave · 2023-09-26T01:20:44Z

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 · 2023-09-26T19:27:37Z

Upgrading to the latest next and storybook resolved the issue.

sanalpanicker · 2023-09-26T19:28:25Z

Hey @DotCoyote, I'm facing the exact same issue after upgrading to @storybook/[email protected] 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 · 2023-09-26T19:31:30Z

I'm still facing the issue with:
[email protected]
[email protected]
@storybook/[email protected]

usrrname · 2023-09-26T19:41:41Z

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

At least storybook builds!

Jonathan-Valladares · 2023-09-26T21:16:59Z

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 [email protected], [email protected], and @storybook/[email protected] 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 · 2023-09-26T21:44:22Z

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 · 2023-09-26T21:49:24Z

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

philwolstenholme · 2023-10-03T11:04:10Z

@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 · 2023-10-04T12:48:02Z

@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 · 2023-10-05T09:53:22Z

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 · 2023-10-05T11:11:04Z

@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 · 2023-10-06T00:29:47Z

@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 · 2023-10-06T15:20:24Z

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 · 2023-10-08T11:23:22Z

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 · 2023-10-09T08:58:50Z

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 · 2023-10-11T18:35:55Z

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 · 2023-10-11T19:07:43Z

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 · 2023-10-12T14:08:59Z

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 · 2023-10-13T07:48:17Z

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

gvillenave · 2023-10-13T17:15:00Z

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

github-actions · 2023-10-28T00:03:54Z

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.

tnyo43 added the bug Issue was opened via the bug report template. label Sep 19, 2023

balazsorban44 closed this as completed Sep 20, 2023

balazsorban44 added the Upstream Related to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.). label Sep 20, 2023

gvillenave mentioned this issue Sep 26, 2023

[Bug]: @storybook/nextjs does not work with Next v13.5.1 storybookjs/storybook#24234

Closed

github-actions bot added the locked label Oct 28, 2023

github-actions bot locked as resolved and limited conversation to collaborators Oct 28, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Storybook build fails with cannot find module error #55620

Storybook build fails with cannot find module error #55620

tnyo43 commented Sep 19, 2023

MUJI-Okubo commented Sep 20, 2023 •

edited

Loading

yannbf commented Sep 20, 2023

DotCoyote commented Sep 20, 2023

balazsorban44 commented Sep 20, 2023 •

edited

Loading

yannbf commented Sep 20, 2023

Jonathan-Valladares commented Sep 25, 2023

DotCoyote commented Sep 25, 2023

usrrname commented Sep 25, 2023

gvillenave commented Sep 26, 2023

sanalpanicker commented Sep 26, 2023

sanalpanicker commented Sep 26, 2023

gvillenave commented Sep 26, 2023

usrrname commented Sep 26, 2023 •

edited

Loading

Jonathan-Valladares commented Sep 26, 2023

gvillenave commented Sep 26, 2023

Diegodsha commented Sep 26, 2023

philwolstenholme commented Oct 3, 2023 •

edited

Loading

yannbf commented Oct 4, 2023

telriot commented Oct 5, 2023

philwolstenholme commented Oct 5, 2023

telriot commented Oct 6, 2023 •

edited

Loading

Jonathan-Valladares commented Oct 6, 2023

yannbf commented Oct 8, 2023

philwolstenholme commented Oct 9, 2023

gvillenave commented Oct 11, 2023

philwolstenholme commented Oct 11, 2023

akshayjai1 commented Oct 12, 2023 •

edited

Loading

valentinpalkovic commented Oct 13, 2023

gvillenave commented Oct 13, 2023

github-actions bot commented Oct 28, 2023

Storybook build fails with cannot find module error #55620

Storybook build fails with cannot find module error #55620

Comments

tnyo43 commented Sep 19, 2023

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Verify canary release

Provide environment information

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

Additional context

MUJI-Okubo commented Sep 20, 2023 • edited Loading

yannbf commented Sep 20, 2023

DotCoyote commented Sep 20, 2023

balazsorban44 commented Sep 20, 2023 • edited Loading

yannbf commented Sep 20, 2023

Jonathan-Valladares commented Sep 25, 2023

DotCoyote commented Sep 25, 2023

usrrname commented Sep 25, 2023

gvillenave commented Sep 26, 2023

sanalpanicker commented Sep 26, 2023

sanalpanicker commented Sep 26, 2023

gvillenave commented Sep 26, 2023

usrrname commented Sep 26, 2023 • edited Loading

Jonathan-Valladares commented Sep 26, 2023

gvillenave commented Sep 26, 2023

Diegodsha commented Sep 26, 2023

philwolstenholme commented Oct 3, 2023 • edited Loading

yannbf commented Oct 4, 2023

telriot commented Oct 5, 2023

philwolstenholme commented Oct 5, 2023

telriot commented Oct 6, 2023 • edited Loading

Jonathan-Valladares commented Oct 6, 2023

yannbf commented Oct 8, 2023

philwolstenholme commented Oct 9, 2023

gvillenave commented Oct 11, 2023

philwolstenholme commented Oct 11, 2023

akshayjai1 commented Oct 12, 2023 • edited Loading

valentinpalkovic commented Oct 13, 2023

gvillenave commented Oct 13, 2023

github-actions bot commented Oct 28, 2023

MUJI-Okubo commented Sep 20, 2023 •

edited

Loading

balazsorban44 commented Sep 20, 2023 •

edited

Loading

usrrname commented Sep 26, 2023 •

edited

Loading

philwolstenholme commented Oct 3, 2023 •

edited

Loading

telriot commented Oct 6, 2023 •

edited

Loading

akshayjai1 commented Oct 12, 2023 •

edited

Loading