Storybook not working

[lissavxo]

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

[chedieck]

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/addons@6.5.9" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-a11y > @storybook/addons@6.5.9" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-a11y > @storybook/api@6.5.9" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-a11y > @storybook/api@6.5.9" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-a11y > @storybook/components@6.5.9" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-a11y > @storybook/components@6.5.9" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-a11y > @storybook/theming@6.5.9" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-a11y > @storybook/theming@6.5.9" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-links > @storybook/router@6.5.9" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-links > @storybook/router@6.5.9" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-a11y > @storybook/components > react-syntax-highlighter@15.5.0" has unmet peer dependency "react@>= 0.14.0".
warning "@storybook/addon-actions > react-inspector@5.1.1" has unmet peer dependency "react@^16.8.4 || ^17.0.0".
warning "@storybook/addon-essentials > @storybook/core-common@6.5.9" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-essentials > @storybook/core-common@6.5.9" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/store@6.5.9" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/store@6.5.9" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @mdx-js/react@1.6.22" has unmet peer dependency "react@^16.13.1 || ^17.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @storybook/preview-web@6.5.9" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @storybook/preview-web@6.5.9" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @storybook/source-loader@6.5.9" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > @storybook/source-loader@6.5.9" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > babel-loader@8.3.0" has unmet peer dependency "webpack@>=2".
warning "@storybook/preset-create-react-app > @pmmmwh/react-refresh-webpack-plugin@0.4.3" has unmet peer dependency "react-refresh@>=0.8.3 <0.10.0".
warning "@storybook/preset-create-react-app > @pmmmwh/react-refresh-webpack-plugin@0.4.3" has unmet peer dependency "webpack@>=4.43.0 <6.0.0".
warning "@storybook/preset-create-react-app > react-docgen-typescript-plugin@1.0.5" has unmet peer dependency "webpack@>= 4".
warning " > @storybook/react@6.5.9" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning " > @storybook/react@6.5.9" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning " > @storybook/react@6.5.9" has unmet peer dependency "require-from-string@^2.0.2".
warning "@storybook/react > @storybook/core@6.5.9" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core@6.5.9" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > react-element-to-jsx-string@14.3.4" has unmet peer dependency "react@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1".
warning "@storybook/react > react-element-to-jsx-string@14.3.4" has unmet peer dependency "react-dom@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1".
warning "@storybook/react > @storybook/core > @storybook/core-client@6.5.9" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/core-client@6.5.9" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/core-server@6.5.9" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/core-server@6.5.9" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/core-client > @storybook/client-api@6.5.9" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/core-client > @storybook/client-api@6.5.9" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/core-client > @storybook/ui@6.5.9" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/core-client > @storybook/ui@6.5.9" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/core-server > @storybook/builder-webpack4@6.5.9" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/core-server > @storybook/builder-webpack4@6.5.9" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/core-server > @storybook/manager-webpack4@6.5.9" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/react > @storybook/core > @storybook/core-server > @storybook/manager-webpack4@6.5.9" 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.

[lissavxo]

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]

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