[heft] heft-storybook-react-tutorial "rushx storybook" example does not work

DavidRieman commented 2 years ago

Summary

In the mainline code we should be able to work with rushstack/build-tests-samples/heft-storybook-react-tutorial as the basis for setting up storykit workflow, but the example itself does not successfully build+launch storybook. (This makes it hard to use the example to either set up a new storybook-related project in rush stack, and makes it harder to develop heft improvements for storybook.)

Repro steps

Sync latest master code
rush update
rush build
cd to rushstack/build-tests-samples/heft-storybook-react-tutorial
rushx storybook

Expected result: Builds and runs storybook: A browser window opens with a storybook Story example.

Actual result: Produces error output. Does not open the browser.

Details

Verified problem occurs on both my Windows and MacOS machines. First we see red error output like:

ERROR in ./storybook-init-framework-entry.js
Module not found: Error: Can't resolve '@storybook/react' in 'C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial'
 @ ./storybook-init-framework-entry.js 1:0-26
 @ multi C:/CODE/rushstack/common/temp/node_modules/.pnpm/@storybook+core-client@6.4.22_m2ha4wqgs5y6chnytfqlahqmme/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js C:/CODE/rushstack/common/temp/node_modules/.pnpm/@storybook+core-client@6.4.22_m2ha4wqgs5y6chnytfqlahqmme/node_modules/@storybook/core-client/dist/esm/globals/globals.js C:/CODE/rushstack/common/temp/node_modules/.pnpm/webpack-hot-middleware@2.25.1/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js C:/CODE/rushstack/common/temp/node_modules/.pnpm/@storybook+addon-docs@6.4.22_sf6zhoyncw267gjzvcqcfauqdy/node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js C:/CODE/rushstack/common/temp/node_modules/.pnpm/@storybook+addon-docs@6.4.22_sf6zhoyncw267gjzvcqcfauqdy/node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js C:/CODE/rushstack/common/temp/node_modules/.pnpm/@storybook+react@6.4.22_6pxnn2xtr5yph4wackblrq76km/node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js C:/CODE/rushstack/common/temp/node_modules/.pnpm/@storybook+addon-links@6.4.22_e4p5kqppx5gth2ijr2xdvk24ma/node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js C:/CODE/rushstack/common/temp/node_modules/.pnpm/@storybook+addon-actions@6.4.22_e4p5kqppx5gth2ijr2xdvk24ma/node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js C:/CODE/rushstack/common/temp/node_modules/.pnpm/@storybook+addon-actions@6.4.22_e4p5kqppx5gth2ijr2xdvk24ma/node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js C:/CODE/rushstack/common/temp/node_modules/.pnpm/@storybook+addon-backgrounds@6.4.22_e4p5kqppx5gth2ijr2xdvk24ma/node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js C:/CODE/rushstack/common/temp/node_modules/.pnpm/@storybook+addon-backgrounds@6.4.22_e4p5kqppx5gth2ijr2xdvk24ma/node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js C:/CODE/rushstack/common/temp/node_modules/.pnpm/@storybook+addon-measure@6.4.22_e4p5kqppx5gth2ijr2xdvk24ma/node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js C:/CODE/rushstack/common/temp/node_modules/.pnpm/@storybook+addon-outline@6.4.22_e4p5kqppx5gth2ijr2xdvk24ma/node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js

Followed by further indications of the problem:

*Verbose Secondary Errors Here...*

``` ModuleNotFoundError: Module not found: Error: Can't resolve '@storybook/react' in 'C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial' at C:\CODE\rushstack\common\temp\node_modules\.pnpm\webpack@4.44.2\node_modules\webpack\lib\Compilation.js:925:10 at C:\CODE\rushstack\common\temp\node_modules\.pnpm\webpack@4.44.2\node_modules\webpack\lib\NormalModuleFactory.js:401:22 at C:\CODE\rushstack\common\temp\node_modules\.pnpm\webpack@4.44.2\node_modules\webpack\lib\NormalModuleFactory.js:130:21 at C:\CODE\rushstack\common\temp\node_modules\.pnpm\webpack@4.44.2\node_modules\webpack\lib\NormalModuleFactory.js:224:22 at C:\CODE\rushstack\common\temp\node_modules\.pnpm\neo-async@2.6.2\node_modules\neo-async\async.js:2830:7 at C:\CODE\rushstack\common\temp\node_modules\.pnpm\neo-async@2.6.2\node_modules\neo-async\async.js:6877:13 at C:\CODE\rushstack\common\temp\node_modules\.pnpm\webpack@4.44.2\node_modules\webpack\lib\NormalModuleFactory.js:214:25 at C:\CODE\rushstack\common\temp\node_modules\.pnpm\enhanced-resolve@4.5.0\node_modules\enhanced-resolve\lib\Resolver.js:213:14 at C:\CODE\rushstack\common\temp\node_modules\.pnpm\enhanced-resolve@4.5.0\node_modules\enhanced-resolve\lib\Resolver.js:285:5 at eval (eval at create (C:\CODE\rushstack\common\temp\node_modules\.pnpm\tapable@1.1.3\node_modules\tapable\lib\HookCodeFactory.js:33:10), :15:1) resolve '@storybook/react' in 'C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial' Parsed request is a module using description file: C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\package.json (relative path: .) Field 'browser' doesn't contain a valid alias configuration resolve as module C:\CODE\rushstack\build-tests-samples\node_modules doesn't exist or is not a directory C:\CODE\rushstack\node_modules doesn't exist or is not a directory C:\CODE\node_modules doesn't exist or is not a directory C:\node_modules doesn't exist or is not a directory looking for modules in C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\node_modules using description file: C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration using description file: C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\package.json (relative path: ./node_modules/@storybook/react) no extension Field 'browser' doesn't contain a valid alias configuration C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\node_modules\@storybook\react doesn't exist .mjs Field 'browser' doesn't contain a valid alias configuration C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\node_modules\@storybook\react.mjs doesn't exist .js Field 'browser' doesn't contain a valid alias configuration C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\node_modules\@storybook\react.js doesn't exist .jsx Field 'browser' doesn't contain a valid alias configuration C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\node_modules\@storybook\react.jsx doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\node_modules\@storybook\react.ts doesn't exist .tsx Field 'browser' doesn't contain a valid alias configuration C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\node_modules\@storybook\react.tsx doesn't exist .json Field 'browser' doesn't contain a valid alias configuration C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\node_modules\@storybook\react.json doesn't exist .cjs Field 'browser' doesn't contain a valid alias configuration C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\node_modules\@storybook\react.cjs doesn't exist as directory C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\node_modules\@storybook\react doesn't exist ModuleNotFoundError: Module not found: Error: Can't resolve '@storybook/react' in 'C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial' at C:\CODE\rushstack\common\temp\node_modules\.pnpm\webpack@4.44.2\node_modules\webpack\lib\Compilation.js:925:10 at C:\CODE\rushstack\common\temp\node_modules\.pnpm\webpack@4.44.2\node_modules\webpack\lib\NormalModuleFactory.js:401:22 at C:\CODE\rushstack\common\temp\node_modules\.pnpm\webpack@4.44.2\node_modules\webpack\lib\NormalModuleFactory.js:130:21 at C:\CODE\rushstack\common\temp\node_modules\.pnpm\webpack@4.44.2\node_modules\webpack\lib\NormalModuleFactory.js:224:22 at C:\CODE\rushstack\common\temp\node_modules\.pnpm\neo-async@2.6.2\node_modules\neo-async\async.js:2830:7 at C:\CODE\rushstack\common\temp\node_modules\.pnpm\neo-async@2.6.2\node_modules\neo-async\async.js:6877:13 at C:\CODE\rushstack\common\temp\node_modules\.pnpm\webpack@4.44.2\node_modules\webpack\lib\NormalModuleFactory.js:214:25 at C:\CODE\rushstack\common\temp\node_modules\.pnpm\enhanced-resolve@4.5.0\node_modules\enhanced-resolve\lib\Resolver.js:213:14 at C:\CODE\rushstack\common\temp\node_modules\.pnpm\enhanced-resolve@4.5.0\node_modules\enhanced-resolve\lib\Resolver.js:285:5 at eval (eval at create (C:\CODE\rushstack\common\temp\node_modules\.pnpm\tapable@1.1.3\node_modules\tapable\lib\HookCodeFactory.js:33:10), :15:1) resolve '@storybook/react' in 'C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial' Parsed request is a module using description file: C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\package.json (relative path: .) Field 'browser' doesn't contain a valid alias configuration resolve as module C:\CODE\rushstack\build-tests-samples\node_modules doesn't exist or is not a directory C:\CODE\rushstack\node_modules doesn't exist or is not a directory C:\CODE\node_modules doesn't exist or is not a directory C:\node_modules doesn't exist or is not a directory looking for modules in C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\node_modules using description file: C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration using description file: C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\package.json (relative path: ./node_modules/@storybook/react) no extension Field 'browser' doesn't contain a valid alias configuration C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\node_modules\@storybook\react doesn't exist .mjs Field 'browser' doesn't contain a valid alias configuration C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\node_modules\@storybook\react.mjs doesn't exist .js Field 'browser' doesn't contain a valid alias configuration C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\node_modules\@storybook\react.js doesn't exist .jsx Field 'browser' doesn't contain a valid alias configuration C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\node_modules\@storybook\react.jsx doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\node_modules\@storybook\react.ts doesn't exist .tsx Field 'browser' doesn't contain a valid alias configuration C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\node_modules\@storybook\react.tsx doesn't exist .json Field 'browser' doesn't contain a valid alias configuration C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\node_modules\@storybook\react.json doesn't exist .cjs Field 'browser' doesn't contain a valid alias configuration C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\node_modules\@storybook\react.cjs doesn't exist as directory C:\CODE\rushstack\build-tests-samples\heft-storybook-react-tutorial\node_modules\@storybook\react doesn't exist WARN Broken build, fix the error above. WARN You may need to refresh the browser. ---- Bundle ready to continue (9671ms) ---- ---- Post-build started ---- ---- Post-build ready to continue (3ms) ---- ```

(On our own storybook projects, we've had some troubles with upgrading dependencies and keeping things working lately. The lack of a working example to study certainly compounds the problem. It's been all too easy for other projects to produce similar errors with things like dependency upgrade attempts or attaching additional storybook parts like storyshots.)

I tried to git bisect to find where this broke (with the assumption that it ever worked at some point) but had trouble with the process. For now, I'm going to see if I can upgrade heft for my other ticket by operating the dev heft against our own working storybook project - but hoping someone who's had this project working before can have a look at what's gone wrong with what seems it should be a golden-path example here.

Standard questions

Please answer these questions to help us investigate your issue more quickly:

Question	Answer
`@rushstack/heft` version?	latest from master
Operating system?	Windows and MacOS
Would you consider contributing a PR?	No
Node.js version (`node -v`)?	14.19.0

iclanton commented 2 years ago

@octogonz - can you take a look at this?

octogonz commented 2 years ago

Once we get this working again, maybe we can invent a test to prevent this sort of regression in the future.

microsoft / rushstack