[Bug]: storyshots crashes with angular and storybook 7: "Cannot read properties of undefined (reading 'clientApi')"

[L3444]

Describe the bug

After upgrading our angular storybook project from 6.5.14 to 7.0.6, storyshots always crashes with the following error:

  console.warn
    importing from @storybook/core-client is deprecated and will be removed in 8.0, please import canvas related modules from @storybook/preview-api

      at Object.warn (node_modules/@storybook/client-logger/dist/index.js:1:1434)
      at node_modules/@storybook/client-logger/dist/index.js:1:1753
      at Object.<anonymous> (node_modules/@storybook/core-client/dist/entry.js:1:582)

FAIL .storyshots/storyshots.test.ts
  ● Test suite failed to run

    TypeError: Cannot read properties of undefined (reading 'clientApi')

      3 | import { MatchImageSnapshotOptions } from "jest-image-snapshot";
      4 |
    > 5 | testStorySnapshots({
        |                   ^
      6 |   suite: "my-angular-project",
      7 |   /*
      8 |     Tests all stories.

      at node_modules/@storybook/addon-storyshots/dist/frameworks/angular/loader.js:34:49
      at Object.load (node_modules/@storybook/addon-storyshots/dist/frameworks/angular/loader.js:39:23)
      at loadFramework (node_modules/@storybook/addon-storyshots/dist/frameworks/frameworkLoader.js:36:19)
      at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/api/index.js:28:99)
      at Object.<anonymous> (.storyshots/storyshots.test.ts:5:19)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.545 s
Ran all test suites.

To Reproduce

No response

System

Environment Info:
          
  Binaries:
    Node: 18.12.1 - ~\.nvm\versions\node\v18.12.1\bin\node.EXE
    npm: 8.19.2 - ~\.nvm\versions\node\v18.12.1\bin\npm.CMD
  npmPackages:
    @storybook/addon-a11y: 7.0.6 => 7.0.6 
    @storybook/addon-essentials: 7.0.6 => 7.0.6 
    @storybook/addon-interactions: 7.0.6 => 7.0.6 
    @storybook/addon-links: 7.0.6 => 7.0.6 
    @storybook/addon-storyshots: 7.0.6 => 7.0.6 
    @storybook/addon-storyshots-puppeteer: 7.0.6 => 7.0.6 
    @storybook/angular: 7.0.6 => 7.0.6 
    @storybook/blocks: 7.0.6 => 7.0.6 
    @storybook/jest: 0.1.0 => 0.1.0 
    @storybook/test-runner: 0.10.0 => 0.10.0 
    @storybook/testing-library: 0.1.0 => 0.1.0

Additional context

note: "@storybook/core-client" does not appear anywhere in the projects codebase outside of package-lock.json.

[dylannnn]

Same issue with v7.0.6

[shilman]

Do you a have a reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏

[L3444]

Do you a have a reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏

I'm sorry, I don't have one because setting up storyshots was already rather complicated in storybook 6.5. In the last days, I manually applied the fix from #22134 to my node_modules/-folder and it did indeed fix the Cannot read properties of undefined (reading 'clientApi') error. But that only revealed multiple follow-up errors, especially the error ws does not work in the browser. Browser clients must use the native WebSocket object that occurred for every single one of my stories. I spent a good amount of time trying to debug this and reading the sourcecode of various dependencies and wasn't able to find any solutions, so I gave up on storyshots and instead decided to migrate to storybook test-runner with toMatchImageSnapshot. This took a good amount of hours and also needed some fixes and research, but was overall faster than trying to fix all the storyshot issues.

[jsalinas3-chwy]

Also running in to this with react on a first-time storyshots setup. Tried to spin up a repro according to the docs with a CRA TS project, but storyshots is attempting to use angular packages

[andgly95]

myorg.zip
I'm able to reproduce the issue on a blank nx project. After installing dependencies, run npx nx test common-ui

[joriswitteman]

Duplicate of #21652

[github-actions]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[github-actions]

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.