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

[DavidRieman]

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), <anonymous>: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), <anonymous>: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]

@octogonz - can you take a look at this?

[octogonz]

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