[Bug]: @storybook/react-webpack5 v7.3 crashes without @storybook/manager-api #23876

dmaier-indeed · 2023-08-17T20:02:23Z

Describe the bug

When updating @storybook/react-webpack5 to v7.3, Storybook failed to launch. After debugging, I found Storybook was not able to resolve @storybook/manager-api. Before v7.3, @storybook/react-webpack5 shipped with @storybook/manager-api in dependencies.

The fix is simple: consumers need to install @storybook/manager-api, however this should either be shipped within @storybook/react-webpack5 or listed as a peer dependency

Crash log

> storybook build --webpack-stats-json -o storybook-static
@storybook/cli v7.3.1
info => Cleaning outputDir: /storybook-static
Attention: We've detected that you're using the following addons in versions which are known to be incompatible with Storybook 7:
- @storybook/addon-queryparams@6.2.9
Please be aware they might not work in Storybook 7. Reach out to their maintainers for updates and check the following Github issue for more information:
https://github.com/storybookjs/storybook/issues/20529
info => Loading presets
info Found existing addon "@storybook/addon-actions", skipping.
info Found existing addon "@storybook/addon-toolbars", skipping.
WARN   Failed to load preset: "/builds/node_modules/@storybook/builder-webpack5/dist/presets/preview-preset.js"
ERR! Error: Cannot find module '@storybook/manager-api/package.json'
ERR! Require stack:
ERR! - /builds/node_modules/@storybook/builder-webpack5/dist/presets/preview-preset.js
ERR! - /builds/node_modules/@storybook/core-common/dist/index.js
ERR! - /builds/node_modules/@storybook/telemetry/dist/index.js
ERR! - /builds/node_modules/@storybook/cli/dist/generate.js
ERR! - /builds/node_modules/@storybook/cli/bin/index.js
ERR! - /builds/node_modules/storybook/index.js
ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1028:15)
ERR!     at Function.Module._resolveFilename (/builds/node_modules/esbuild-register/dist/node.js:4768:36)
ERR!     at Function.resolve (node:internal/modules/cjs/helpers:125:19)
ERR!     at getAbsolutePath (/builds/node_modules/@storybook/builder-webpack5/dist/presets/preview-preset.js:3:323)
ERR!     at Object.<anonymous> (/builds/node_modules/@storybook/builder-webpack5/dist/presets/preview-preset.js:3:785)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1198:14)
ERR!     at Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
ERR!     at Object.newLoader (/builds/node_modules/esbuild-register/dist/node.js:2262:9)
ERR!     at Object.extensions..js (/builds/node_modules/esbuild-register/dist/node.js:4807:24)
ERR!     at Module.load (node:internal/modules/cjs/loader:1076:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:911:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1100:19)
ERR!     at require (node:internal/modules/cjs/helpers:119:18)
ERR!     at interopRequireDefault (/builds/node_modules/@storybook/core-common/dist/index.js:6:21)
ERR!     at getContent (/builds/node_modules/@storybook/core-common/dist/index.js:13:332)
ERR!     at loadPreset (/builds/node_modules/@storybook/core-common/dist/index.js:13:517)
ERR!  Error: Cannot find module '@storybook/manager-api/package.json'
ERR! Require stack:
ERR! - /builds/node_modules/@storybook/builder-webpack5/dist/presets/preview-preset.js
ERR! - /builds/node_modules/@storybook/core-common/dist/index.js
ERR! - /builds/node_modules/@storybook/telemetry/dist/index.js
ERR! - /builds/node_modules/@storybook/cli/dist/generate.js
ERR! - /builds/node_modules/@storybook/cli/bin/index.js
ERR! - /builds/node_modules/storybook/index.js
ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1028:15)
ERR!     at Function.Module._resolveFilename (/builds/node_modules/esbuild-register/dist/node.js:4768:36)
ERR!     at Function.resolve (node:internal/modules/cjs/helpers:125:19)
ERR!     at getAbsolutePath (/builds/node_modules/@storybook/builder-webpack5/dist/presets/preview-preset.js:3:323)
ERR!     at Object.<anonymous> (/builds/node_modules/@storybook/builder-webpack5/dist/presets/preview-preset.js:3:785)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1198:14)
ERR!     at Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
ERR!     at Object.newLoader (/builds/node_modules/esbuild-register/dist/node.js:2262:9)
ERR!     at Object.extensions..js (/builds/node_modules/esbuild-register/dist/node.js:4807:24)
ERR!     at Module.load (node:internal/modules/cjs/loader:1076:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:911:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1100:19)
ERR!     at require (node:internal/modules/cjs/helpers:119:18)
ERR!     at interopRequireDefault (/builds/node_modules/@storybook/core-common/dist/index.js:6:21)
ERR!     at getContent (/builds/node_modules/@storybook/core-common/dist/index.js:13:332)
ERR!     at loadPreset (/builds/node_modules/@storybook/core-common/dist/index.js:13:517) {
ERR!   code: 'MODULE_NOT_FOUND',
ERR!   requireStack: [
ERR!     '/builds/node_modules/@storybook/builder-webpack5/dist/presets/preview-preset.js',
ERR!     '/builds/node_modules/@storybook/core-common/dist/index.js',
ERR!     '/builds/node_modules/@storybook/telemetry/dist/index.js',
ERR!     '/builds/node_modules/@storybook/cli/dist/generate.js',
ERR!     '/builds/node_modules/@storybook/cli/bin/index.js',
ERR!     '/builds/node_modules/storybook/index.js'
ERR!   ]
ERR! }

To Reproduce

Install Storybook with @storybook/react-webpack5 preset but do not install @storybook/manager-api. Attempt to launch Storybook

System

Environment Info:

  System:
    OS: macOS 13.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 16.20.2 - ~/.nvm/versions/node/v16.20.2/bin/node
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.2/bin/npm
  Browsers:
    Chrome: 115.0.5790.170
    Firefox: 115.0.3
    Safari: 16.6
  npmPackages:
    @storybook/addon-a11y: ^7.3.1 => 7.3.1 
    @storybook/addon-actions: ^7.3.1 => 7.3.1 
    @storybook/addon-essentials: ^7.3.1 => 7.3.1 
    @storybook/addon-interactions: ^7.3.1 => 7.3.1 
    @storybook/addon-links: ^7.3.1 => 7.3.1 
    @storybook/addon-queryparams: ^6.2.9 => 6.2.9 
    @storybook/addon-toolbars: ^7.3.1 => 7.3.1 
    @storybook/jest: ^0.1.0 => 0.1.0 
    @storybook/manager-api: ^7.3.1 => 7.3.1 
    @storybook/react: ^7.3.1 => 7.3.1 
    @storybook/react-webpack5: ^7.3.1 => 7.3.1 
    @storybook/test-runner: ^0.13.0 => 0.13.0 
    @storybook/testing-library: ^0.2.0 => 0.2.0

Additional context

New bug as of version 7.3.0. Most likely from commit f70f0508f182b475c65a5b9d87444421ef8790eb

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

mkosir · 2023-08-18T09:22:22Z

Can reproduce the same issue, but would also add that it will fail with same error in case project was using @storybook/addons, "@storybook/theming",... or any other dependency that was removed in mentioned commit.

yannbf · 2023-08-18T11:44:08Z

Hey @mkosir @dmaier-indeed thanks for reporting the issue! I'm unfortunately not able to reproduce it, can you tell me what I'm doing wrong?
https://stackblitz.com/edit/github-j83rie?file=package.json

Could you also check whether removing your lock file + node_modules and reinstalling your dependencies solves your issue? Thank you!

mkosir · 2023-08-18T12:25:32Z

Hey @yannbf 👋
To reproduce:

clone and npm i react-parallax-tilt repo
run npm run start - storybook works
remove @storybook/addon-essentials or @storybook/manager-api and npm i
run npm run start - storybook fails

yannbf · 2023-08-18T14:31:34Z

Thank you so much @mkosir!

I followed your steps and removed @storybook/manager-api, but there were no issues.
When I removed @storybook/manager-api AND @storybook/addon-essentials, then I had an issue, which was slightly different than the one originally reported, but similar:

ERR! Error: Cannot find module '@storybook/components/package.json'
ERR! Require stack:
ERR! - /Users/yannbraga/experiments/react-parallax-tilt/node_modules/@storybook/builder-webpack5/dist/presets/preview-preset.js

Regardless, we tracked the issue and released 7.3.2 which should be working correctly now (I tried on your repro).

mkosir · 2023-08-18T14:47:07Z

Thank you @yannbf, that was fast 🚀

I followed your steps and removed @storybook/manager-api, but there were no issues.
When I removed @storybook/manager-api AND @storybook/addon-essentials, then I had an issue, which was slightly different than the one originally reported, but similar:

Thanks you are correct, there is no issues with storybook running if we remove just @storybook/manager-api.

In my case other scripts failed such as lint, typescript check etc. since importing addons to set the theme.
With Storybook upgrade change was needed from
import { addons } from '@storybook/addons';
to
import { addons } from '@storybook/manager-api';

dmaier-indeed · 2023-08-21T14:23:21Z

Confirmed I no longer see the issue with version 7.3.2 👍

mkosir · 2023-08-29T11:23:09Z

It looks like we have a regression in v7.4.0.

yannbf · 2023-08-30T07:51:43Z

It looks like we have a regression in v7.4.0.

Confirmed it was not a regression. It's all good!

dmaier-indeed added bug needs triage labels Aug 17, 2023

github-project-automation bot added this to Core Team Projects Aug 17, 2023

vanessayuenn added upgrade:7.3 sev:S2 labels Aug 18, 2023

vanessayuenn moved this to Empathy Backlog in Core Team Projects Aug 18, 2023

vanessayuenn added react builder-webpack5 sev:S1 and removed needs triage sev:S2 labels Aug 18, 2023

vanessayuenn mentioned this issue Aug 18, 2023

Maintenance: Revert "WebpackBuilder: Remove need for react as peerDependency" #23882

Merged

vanessayuenn added the needs reproduction label Aug 18, 2023

yannbf closed this as completed in #23882 Aug 18, 2023

github-project-automation bot moved this from Empathy Backlog to Done in Core Team Projects Aug 18, 2023

ndelangen mentioned this issue Aug 21, 2023

Maintenance: Remove need for react as peerDependency #23897

Merged

5 tasks

mkosir mentioned this issue Aug 30, 2023

[Bug]: Regression - @storybook/react-webpack5 v7.4 crashes without @storybook/manager-api #24004

Closed

vanessayuenn added sev:S2 and removed sev:S2 labels Oct 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]: @storybook/react-webpack5 v7.3 crashes without @storybook/manager-api #23876

[Bug]: @storybook/react-webpack5 v7.3 crashes without @storybook/manager-api #23876

dmaier-indeed commented Aug 17, 2023 •

edited

Loading

mkosir commented Aug 18, 2023

yannbf commented Aug 18, 2023 •

edited

Loading

mkosir commented Aug 18, 2023

yannbf commented Aug 18, 2023

mkosir commented Aug 18, 2023

dmaier-indeed commented Aug 21, 2023

mkosir commented Aug 29, 2023

yannbf commented Aug 30, 2023

[Bug]: @storybook/react-webpack5 v7.3 crashes without @storybook/manager-api #23876

[Bug]: @storybook/react-webpack5 v7.3 crashes without @storybook/manager-api #23876

Comments

dmaier-indeed commented Aug 17, 2023 • edited Loading

Describe the bug

To Reproduce

System

Additional context

mkosir commented Aug 18, 2023

yannbf commented Aug 18, 2023 • edited Loading

mkosir commented Aug 18, 2023

yannbf commented Aug 18, 2023

mkosir commented Aug 18, 2023

dmaier-indeed commented Aug 21, 2023

mkosir commented Aug 29, 2023

yannbf commented Aug 30, 2023

dmaier-indeed commented Aug 17, 2023 •

edited

Loading

yannbf commented Aug 18, 2023 •

edited

Loading