Nx Storybook does not work by default with Next.js preset

[Demianeen]

Current Behavior

Storybook does not work after initiating storybook configuration with nx next generator

Expected Behavior

Nx next storybook generator will work

GitHub Repo

https://github.com/Demianeen/storybook-next-nx-repro

Steps to Reproduce

1. Run pnpm create nx-workspace@latest storybook-next --preset next with all options by default
   
2. Run cd storybook-next
3. Run pnpm nx g @nx/next:storybook-configuration storybook-next with all options by default
   
4. Run pnpm nx storybook storybook-next
5. See errors
   

Nx Report

NX   Report complete - copy this into the issue template

Node           : 20.14.0
OS             : darwin-arm64
Native Target  : aarch64-macos
pnpm           : 9.4.0

nx                 : 19.5.4
@nx/js             : 19.5.4
@nx/jest           : 19.5.4
@nx/linter         : 19.5.4
@nx/eslint         : 19.5.4
@nx/workspace      : 19.5.4
@nx/cypress        : 19.5.4
@nx/devkit         : 19.5.4
@nx/eslint-plugin  : 19.5.4
@nx/next           : 19.5.4
@nx/playwright     : 19.5.4
@nx/react          : 19.5.4
@nx/storybook      : 19.5.4
@nrwl/tao          : 19.5.4
@nx/web            : 19.5.4
@nx/webpack        : 19.5.4
typescript         : 5.5.4
---------------------------------------
Registered Plugins:
@nx/next/plugin
@nx/playwright/plugin
@nx/eslint/plugin
@nx/jest/plugin
@nx/storybook/plugin

Failure Logs

> nx run storybook-next:storybook

> storybook dev

@storybook/cli v7.6.20


attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

info => Starting manager..
WARN No story files found for the specified pattern: components/**/*.stories.@(js|jsx|ts|tsx|mdx)
info => Starting preview..
info Using Babel compiler
info Addon-docs: using MDX2
info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
ERROR in ./storybook-stories.js 10:11-14:5
Module not found: Error: Can't resolve './components' in '/Users/demian/projects/work/storybook-next/apps/storybook-next'
 @ ./storybook-config-entry.js 6:0-50 25:21-29 28:2-31:4 28:58-31:3 30:31-39

preview compiled with 1 error
=> Failed to build the preview
99% end closing watch compilationWARN Force closed preview build
SB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.
Run Storybook with --debug-webpack for more information.
    at starter (/Users/demian/projects/work/storybook-next/node_modules/.pnpm/@storybook+builder-webpack5@7.6.20_@swc+helpers@0.5.12_esbuild@0.18.20_typescript@5.5.4/node_modules/@storybook/builder-webpack5/dist/index.js:1:9660)
    at starter.next (<anonymous>)
    at Module.start (/Users/demian/projects/work/storybook-next/node_modules/.pnpm/@storybook+builder-webpack5@7.6.20_@swc+helpers@0.5.12_esbuild@0.18.20_typescript@5.5.4/node_modules/@storybook/builder-webpack5/dist/index.js:1:11692)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

✖ Would you like to help improve Storybook by sending anonymous crash reports? … yes
Warning: command "storybook dev" exited with non-zero status code
———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 NX   Ran target storybook for project storybook-next (7m)

   ✖  1/1 failed

Package Manager Version

9.4.0

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.