Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Storybook can't compile, build and run after use "pnpm patch ..." #29413

Open
wmitrus opened this issue Oct 20, 2024 · 0 comments
Open

Comments

@wmitrus
Copy link

wmitrus commented Oct 20, 2024

Describe the bug

Hi,

I have used a simple patch feature from pnpm to patch a next package.

I made two changes in "node_modules/next/dist/server/lib/start-server.js" file:
`...
const _trace = require("../../trace");
const _ispostpone = require("./router-utils/is-postpone");

const _logger = require('pino-http')(); // HERE
function _interop_require_default(obj) {
return obj && obj.__esModule ? obj : {
...`

...
async function requestListener(req, res) {
    if (!/^(\/_next\/static|\/_next\/image|\/favicon.ico)/.test(req.url)) _logger(req, res); // AND HERE
    try {
        if (handlersPromise) {
...
  1. pnpm patch next
  2. made changes from above description
  3. pnpm patch-commit ...

after that when I'm trying to run storybook I get:

`WARN The following packages are incompatible with Storybook 8.3.5 as they depend on different major versions of Storybook packages:
WARN - @storybook/addon-postcss@2.0.0
WARN
WARN
WARN Please consider updating your packages or contacting the maintainers for compatibility details.
WARN For more on Storybook 8 compatibility, see the linked GitHub issue:
WARN #26031
info => Starting manager..
info => Starting preview..
info Addon-docs: using MDX3
info => Using PostCSS preset with postcss@7.0.39
info => Using SWC as compiler
info => [@storybook/addon-styling-webpack] Applying custom Storybook webpack configuration styling.
info => Using default Webpack5 setup
[webpack-dev-middleware] wait until bundle finished
10% building 0/3 entries 4/10 dependencies 0/3 modulesinfo Using tsconfig paths for react-docgen
ERROR in ./storybook-config-entry.js 11:531-785
Module not found: Error: Can't resolve 'D:/projects/starters/test/nextjs14-starter-eslint9/node_modules/.pnpm/@storybook+nextjs@8.3.5_esbuild@0.23.1_next@14.2.15_patch_hash=rqvkzn2fzygtfj7gz4svhchqyu_@ba_g6bqqg6stl5ajfeudztydpdwzu/node_modules/@storybook/nextjs/dist/preview.mjs' in 'D:\projects\starters\test\nextjs14-starter-eslint9'

ERROR in ./storybook-config-entry.js 32:0-35:2
Module not found: Error: Can't resolve 'D:/projects/starters/test/nextjs14-starter-eslint9/node_modules/.pnpm/@storybook+nextjs@8.3.5_esbuild@0.23.1_next@14.2.15_patch_hash=rqvkzn2fzygtfj7gz4svhchqyu_@ba_g6bqqg6stl5ajfeudztydpdwzu/node_modules/@storybook/nextjs/dist/preview.mjs' in 'D:\projects\starters\test\nextjs14-starter-eslint9'

preview compiled with 2 errors
=> 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 (.\node_modules.pnpm@storybook+builder-webpack5@8.3.5_esbuild@0.23.1_storybook@8.3.5_typescript@5.6.3\node_modules@storybook\builder-webpack5\dist\index.js:1:8004)
at starter.next ()
at Module.start (.\node_modules.pnpm@storybook+builder-webpack5@8.3.5_esbuild@0.23.1_storybook@8.3.5_typescript@5.6.3\node_modules@storybook\builder-webpack5\dist\index.js:1:9972)
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`

When I revert the changes storybook works fine again.

pnpm patch-remove next@14.2.15

To reproduce it please use this code https://github.com/wmitrus/nextjs14-starter-eslint9

and do the patch using above commands.

Reproduction link

https://github.com/wmitrus/nextjs14-starter-eslint9

Reproduction steps

  1. you can clone my project: https://github.com/wmitrus/nextjs14-starter-eslint9
  2. pnpm patch next
  3. do this changes

`...
const _trace = require("../../trace");
const _ispostpone = require("./router-utils/is-postpone");

const _logger = require('pino-http')(); // HERE
function _interop_require_default(obj) {
return obj && obj.__esModule ? obj : {
...`

...
async function requestListener(req, res) {
    if (!/^(\/_next\/static|\/_next\/image|\/favicon.ico)/.test(req.url)) _logger(req, res); // AND HERE
    try {
        if (handlersPromise) {
...
  1. Commit patch: pnpm patch-commit <>
  2. Run "pnpm storybook"

System

$ npx storybook@latest info
Need to install the following packages:
storybook@8.3.6
Ok to proceed? (y)
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

Storybook Environment Info:

System:
OS: Windows 10 10.0.19045
CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
Binaries:
Node: 18.20.4 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.21 - ~\AppData\Roaming\npm\yarn.CMD
npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
pnpm: 9.4.0 - ~\AppData\Local\pnpm\pnpm.CMD <----- active
Browsers:
Edge: Chromium (127.0.2651.86)
npmPackages:
@storybook/addon-essentials: 8.3.5 => 8.3.5
@storybook/addon-interactions: 8.3.5 => 8.3.5
@storybook/addon-links: 8.3.5 => 8.3.5
@storybook/addon-onboarding: 8.3.5 => 8.3.5
@storybook/addon-postcss: ^2.0.0 => 2.0.0
@storybook/addon-styling-webpack: ^1.0.0 => 1.0.0
@storybook/blocks: 8.3.5 => 8.3.5
@storybook/nextjs: 8.3.5 => 8.3.5
@storybook/react: 8.3.5 => 8.3.5
@storybook/test: 8.3.5 => 8.3.5
eslint-plugin-storybook: ^0.9.0 => 0.9.0
storybook: 8.3.5 => 8.3.5

Additional context

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant