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.

Sign up for GitHub

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

Jump to bottom

Storybook not working #349

Open
lissavxo opened this issue Jan 24, 2024 · 3 comments · May be fixed by #351
Open

Storybook not working #349

lissavxo opened this issue Jan 24, 2024 · 3 comments · May be fixed by #351
Assignees
@chedieck @lissavxo
Labels
bug Something isn't working enhancement (development) Improvement to the development situation
Milestone
Phase 3

Comments

@lissavxo
Copy link
Collaborator

After adding the package "crypto-js" the storybook is not working properly.
Try running docker-compose up on master, it wont work
@chedieck
Copy link
Collaborator

chedieck commented Jan 24, 2024 •
edited
Loading

I don't think it has to do with the package crypto-js, I manually uninstalled it from the project and substituted it with dummy functions where it was previously used, and still got the same error, which btw was:

ERR! Error: Cannot find module 'react/package.json'
ERR! Require stack:
ERR! - /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/ui/noop.js
ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1143:15)
ERR!     at resolveFileName (/home/ttv1/codes/client-paybutton/react/node_modules/resolve-from/index.js:29:39)
ERR!     at resolveFrom (/home/ttv1/codes/client-paybutton/react/node_modules/resolve-from/index.js:43:9)
ERR!     at module.exports (/home/ttv1/codes/client-paybutton/react/node_modules/resolve-from/index.js:46:47)
ERR!     at Object.<anonymous> (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/ui/paths.js:17:18)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1375:14)
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1434:10)
ERR!     at Module.load (node:internal/modules/cjs/loader:1206:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:1022:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1234:19)
ERR!     at require (node:internal/modules/helpers:176:18)
ERR!     at Object.<anonymous> (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/manager-webpack4/dist/cjs/presets/manager-preset.js:61:37)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1375:14)
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1434:10)
ERR!     at Module.load (node:internal/modules/cjs/loader:1206:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:1022:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1234:19)
ERR!     at require (node:internal/modules/helpers:176:18)
ERR!     at interopRequireDefault (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-common/dist/cjs/presets.js:178:16)
ERR!     at getContent (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-common/dist/cjs/presets.js:194:10)
ERR!     at loadPreset (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-common/dist/cjs/presets.js:203:20)
ERR!     at /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-common/dist/cjs/presets.js:256:18
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-common/dist/cjs/presets.js:255:18)
ERR!     at getPresets (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-common/dist/cjs/presets.js:313:23)
ERR!     at loadAllPresets (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-common/dist/cjs/presets.js:365:10)
ERR!     at buildDevStandalone (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-server/dist/cjs/build-dev.js:108:48)
ERR!     at buildDev (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5)
ERR!  Error: Cannot find module 'react/package.json'
ERR! Require stack:
ERR! - /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/ui/noop.js
ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1143:15)
ERR!     at resolveFileName (/home/ttv1/codes/client-paybutton/react/node_modules/resolve-from/index.js:29:39)
ERR!     at resolveFrom (/home/ttv1/codes/client-paybutton/react/node_modules/resolve-from/index.js:43:9)
ERR!     at module.exports (/home/ttv1/codes/client-paybutton/react/node_modules/resolve-from/index.js:46:47)
ERR!     at Object.<anonymous> (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/ui/paths.js:17:18)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1375:14)
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1434:10)
ERR!     at Module.load (node:internal/modules/cjs/loader:1206:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:1022:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1234:19)
ERR!     at require (node:internal/modules/helpers:176:18)
ERR!     at Object.<anonymous> (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/manager-webpack4/dist/cjs/presets/manager-preset.js:61:37)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1375:14)
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1434:10)
ERR!     at Module.load (node:internal/modules/cjs/loader:1206:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:1022:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1234:19)
ERR!     at require (node:internal/modules/helpers:176:18)
ERR!     at interopRequireDefault (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-common/dist/cjs/presets.js:178:16)
ERR!     at getContent (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-common/dist/cjs/presets.js:194:10)
ERR!     at loadPreset (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-common/dist/cjs/presets.js:203:20)
ERR!     at /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-common/dist/cjs/presets.js:256:18
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-common/dist/cjs/presets.js:255:18)
ERR!     at getPresets (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-common/dist/cjs/presets.js:313:23)
ERR!     at loadAllPresets (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-common/dist/cjs/presets.js:365:10)
ERR!     at buildDevStandalone (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-server/dist/cjs/build-dev.js:108:48)
ERR!     at buildDev (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5) {
ERR!   code: 'MODULE_NOT_FOUND',
ERR!   requireStack: [
ERR!     '/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/ui/noop.js'
ERR!   ]
ERR! }
ERR! Error: Cannot find module 'react/package.json'
ERR! Require stack:
ERR! - /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/builder-webpack4/dist/cjs/preview/iframe-webpack.config.js
ERR! - /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/builder-webpack4/dist/cjs/presets/preview-preset.js
ERR! - /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-common/dist/cjs/presets.js
ERR! - /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-common/dist/cjs/index.js
ERR! - /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/react/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/react/node_modules/@storybook/core/server.js
ERR! - /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/react/dist/cjs/server/index.js
ERR! - /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/react/bin/index.js
ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1143:15)
ERR!     at Function.resolve (node:internal/modules/helpers:187:19)
ERR!     at _default (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/builder-webpack4/dist/cjs/preview/iframe-webpack.config.js:198:46)
ERR!     at starterGeneratorFn (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:135:16)
ERR!     at Object.start (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:275:14)
ERR!     at async Promise.all (index 0)
ERR!     at storybookDevServer (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-server/dist/cjs/dev-server.js:207:28)
ERR!     at buildDevStandalone (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-server/dist/cjs/build-dev.js:120:31)
ERR!     at buildDev (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5)
ERR!  Error: Cannot find module 'react/package.json'
ERR! Require stack:
ERR! - /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/builder-webpack4/dist/cjs/preview/iframe-webpack.config.js
ERR! - /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/builder-webpack4/dist/cjs/presets/preview-preset.js
ERR! - /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-common/dist/cjs/presets.js
ERR! - /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-common/dist/cjs/index.js
ERR! - /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/react/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/react/node_modules/@storybook/core/server.js
ERR! - /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/react/dist/cjs/server/index.js
ERR! - /home/ttv1/codes/client-paybutton/react/node_modules/@storybook/react/bin/index.js
ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1143:15)
ERR!     at Function.resolve (node:internal/modules/helpers:187:19)
ERR!     at _default (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/builder-webpack4/dist/cjs/preview/iframe-webpack.config.js:198:46)
ERR!     at starterGeneratorFn (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:135:16)
ERR!     at Object.start (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:275:14)
ERR!     at async Promise.all (index 0)
ERR!     at storybookDevServer (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-server/dist/cjs/dev-server.js:207:28)
ERR!     at buildDevStandalone (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-server/dist/cjs/build-dev.js:120:31)
ERR!     at buildDev (/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5) {
ERR!   code: 'MODULE_NOT_FOUND',
ERR!   requireStack: [
ERR!     '/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/builder-webpack4/dist/cjs/preview/iframe-webpack.config.js',
ERR!     '/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/builder-webpack4/dist/cjs/presets/preview-preset.js',
ERR!     '/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-common/dist/cjs/presets.js',
ERR!     '/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-common/dist/cjs/index.js',
ERR!     '/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/core-server/dist/cjs/index.js',
ERR!     '/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/react/node_modules/@storybook/core/dist/cjs/server.js',
ERR!     '/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/react/node_modules/@storybook/core/server.js',
ERR!     '/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/react/dist/cjs/server/index.js',
ERR!     '/home/ttv1/codes/client-paybutton/react/node_modules/@storybook/react/bin/index.js'
ERR!   ]
ERR! }

... which is better explained by the warnings we get when running yarn:

warning "@storybook/addon-a11y > @storybook/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-a11y > @storybook/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-a11y > @storybook/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-a11y > @storybook/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-a11y > @storybook/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-a11y > @storybook/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-a11y > @storybook/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-a11y > @storybook/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-links > @storybook/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-links > @storybook/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-a11y > @storybook/components > [email protected]" has unmet peer dependency "react@>= 0.14.0".
warning "@storybook/addon-actions > [email protected]" has unmet peer dependency "react@^16.8.4 || ^17.0.0".
warning "@storybook/addon-essentials > @storybook/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-essentials > @storybook/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @mdx-js/[email protected]" has unmet peer dependency "react@^16.13.1 || ^17.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @storybook/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @storybook/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @storybook/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @storybook/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > [email protected]" has unmet peer dependency "webpack@>=2".
warning "@storybook/preset-create-react-app > @pmmmwh/[email protected]" has unmet peer dependency "react-refresh@>=0.8.3 <0.10.0".
warning "@storybook/preset-create-react-app > @pmmmwh/[email protected]" has unmet peer dependency "webpack@>=4.43.0 <6.0.0".
warning "@storybook/preset-create-react-app > [email protected]" has unmet peer dependency "webpack@>= 4".
warning " > @storybook/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning " > @storybook/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning " > @storybook/[email protected]" has unmet peer dependency "require-from-string@^2.0.2".
warning "@storybook/react > @storybook/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > [email protected]" has unmet peer dependency "react@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1".
warning "@storybook/react > [email protected]" has unmet peer dependency "react-dom@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1".
warning "@storybook/react > @storybook/core > @storybook/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/core-client > @storybook/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/core-client > @storybook/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/core-client > @storybook/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/core-client > @storybook/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/core-server > @storybook/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/core-server > @storybook/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/core-server > @storybook/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/core-server > @storybook/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".

This probably has to do with the packages updates + yarn migration; and the solution is probably to update storybook too and add the peer dependencies react and react-dom if it is still complaining about it after the update.

@chedieck chedieck linked a pull request Jan 24, 2024 that will close this issue
Open
@lissavxo
Copy link
Collaborator Author

if you go to the commit before yarn was added this error was happening already, so this is not realated to yarn update.
I agree it can be related to the version of storybook
I created this test branch temp/test-remove-cryptojs , if you use this one and perform a docker-compose up storybook works normally as it was before, that is why I mentioned it can be related to the "crypto-js" package

@chedieck
Copy link
Collaborator

if you go to the commit before yarn was added this error was happening already, so this is not realated to yarn update.

What commit did you go? it probably undoes other changes that may relate to this somehow.

if you use this one and perform a docker-compose up storybook works normally as it was before, that is why I mentioned it can be related to the "crypto-js" package

I ran on that branch, to make sure it is not any caching issues:

sh -c 'rm -rf node_modules/  && docker system prune -af &&  docker volume prune -af &&  docker image prune -af && docker-compose up' &> out.log

... and still got the same error.

out.log

@Klakurka Klakurka added bug Something isn't working enhancement (development) Improvement to the development situation labels Jan 25, 2024
@Klakurka Klakurka modified the milestones: Phase 2, Phase 3 Jan 25, 2024
@Klakurka Klakurka mentioned this issue Jan 25, 2024
Closed
@lissavxo lissavxo mentioned this issue Mar 7, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@chedieck chedieck

@lissavxo lissavxo

Labels
bug Something isn't working enhancement (development) Improvement to the development situation
Projects
None yet
Milestone
Phase 3
Development

Successfully merging a pull request may close this issue.

[#349] chore: update storybook PayButton/paybutton
3 participants
@Klakurka @chedieck @lissavxo