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.

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

[Bug]: TypeError: Cannot read properties of undefined (reading 'clientApi') #21652

Closed
wegry opened this issue Mar 17, 2023 · 31 comments · Fixed by #22134
Closed

[Bug]: TypeError: Cannot read properties of undefined (reading 'clientApi') #21652

wegry opened this issue Mar 17, 2023 · 31 comments · Fixed by #22134

Comments

@wegry
Copy link

wegry commented Mar 17, 2023

Describe the bug

After trying to update to [email protected] for TS 5.0 support, I'm seeing

  ● Test suite failed to run

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

      11 | );
      12 |
    > 13 | initStoryshots();
         |               ^
      14 |

      at .yarn/__virtual__/@storybook-addon-storyshots-virtual-f338e9c3bc/0/cache/@storybook-addon-storyshots-npm-7.0.0-rc.4-b1d5a8161c-7f08071aeb.zip/node_modules/@storybook/addon-storyshots/dist/frameworks/react/loader.js:25:49
      at Object.load (.yarn/__virtual__/@storybook-addon-storyshots-virtual-f338e9c3bc/0/cache/@storybook-addon-storyshots-npm-7.0.0-rc.4-b1d5a8161c-7f08071aeb.zip/node_modules/@storybook/addon-storyshots/dist/frameworks/react/loader.js:30:23)
      at loadFramework (.yarn/__virtual__/@storybook-addon-storyshots-virtual-f338e9c3bc/0/cache/@storybook-addon-storyshots-npm-7.0.0-rc.4-b1d5a8161c-7f08071aeb.zip/node_modules/@storybook/addon-storyshots/dist/frameworks/frameworkLoader.js:36:19)
      at testStorySnapshots (.yarn/__virtual__/@storybook-addon-storyshots-virtual-f338e9c3bc/0/cache/@storybook-addon-storyshots-npm-7.0.0-rc.4-b1d5a8161c-7f08071aeb.zip/node_modules/@storybook/addon-storyshots/dist/api/index.js:28:99)
      at Object.<anonymous> ([OBFUSCATED_PATH]/storyshots.test.ts:13:15)

To Reproduce

No response

System

Environment Info:

  System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
    Yarn: 3.5.0 - /opt/homebrew/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
  Browsers:
    Chrome: 111.0.5563.64
    Safari: 16.3


### Additional context

_No response_
@shilman
Copy link
Member

shilman commented Mar 21, 2023

Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. Thank you! 🙏

@wegry
Copy link
Author

wegry commented Mar 21, 2023

@shilman With [email protected] (bumping from rc 4) and associated packages, I can get my project to successfully build and run storyshot tests.

@manbearwiz
Copy link
Contributor

I'm running into this same issue but with Angular instead of React. Not sure if a fix was applied to the React loader, Ill continue to investigate

Error

> jest ./.storybook/Storyshots.spec.ts --config=./.storybook/jest.config.js

Determining test suites to run...
ngcc-jest-processor: running ngcc
  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

      3 | const path = require('path');
      4 |
    > 5 | initStoryshots({
        |               ^
      6 |   suite: 'Image storyshots',
      7 |   test: imageSnapshot({
      8 |     storybookUrl: `file://${path.resolve(__dirname, '../storybook-static')}`,

      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)
      at Object.<anonymous> (node_modules/@storybook/angular/dist/client/public-api.js:21:23)
      at Object.<anonymous> (node_modules/@storybook/angular/dist/client/index.js:21:14)
      at Object.<anonymous> (node_modules/@storybook/angular/dist/index.js:17:14)
      at node_modules/@storybook/addon-storyshots/dist/frameworks/angular/loader.js:33:32
      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> (.storybook/Storyshots.spec.ts:5:15)

 FAIL  .storybook/Storyshots.spec.ts
  ● Test suite failed to run

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

      3 | const path = require('path');
      4 |
    > 5 | initStoryshots({
        |               ^
      6 |   suite: 'Image storyshots',
      7 |   test: imageSnapshot({
      8 |     storybookUrl: `file://${path.resolve(__dirname, '../storybook-static')}`,

      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> (.storybook/Storyshots.spec.ts:5:15)

Seems like the error is coming from here

renderAPI.addDecorator = mockStartedAPI.clientApi.addDecorator;

Test is pretty simple
storyshots.spec.ts

import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
const path = require('path');

initStoryshots({
  suite: 'Image storyshots',
  test: imageSnapshot({
    storybookUrl: `file://${path.resolve(__dirname, '../storybook-static')}`,
  }),
});

@manbearwiz
Copy link
Contributor

Assuming this is the cause of that first warning

import { start } from '@storybook/core-client';

image

@ribeaud
Copy link

ribeaud commented Apr 24, 2023

I am having the same problem for a couple of releases now (since v7). I had the hope, this would resolve over time but it unfortunately did not.

The interesting thing is: if I generate the package-lock.json from scratch, then the issue disappears. I have no clue what is going on and would be happy to understand where should I start. The project is open source: https://gitlab.com/biomedit/next-widgets/-/merge_requests/220.

@shilman
Copy link
Member

shilman commented Apr 27, 2023

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.10 containing PR #22134 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future

@AndreiSoroka
Copy link

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.10 containing PR #22134 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future

Hi, would you happen to have a working example? because v7.1.0-alpha10

I got error:

● Test suite failed to run

Your test suite must contain at least one test.

storyshots.spec.js

import initStoryshots from "@storybook/addon-storyshots";
import { imageSnapshot } from "@storybook/addon-storyshots-puppeteer";
const path = require("path");
// import { render } from "@testing-library/react";

const getScreenshotOptions = ({ context, url }) => {
  return {
    fullPage: false, // Do not take the full page screenshot. Default is 'true' in Storyshots.
  };
};

const beforeScreenshot = (page, { context: { kind, story }, url }) => {
  page.setViewport({ width: 1440, height: 960 });
};

const storybookUrl = `file://${path.resolve(__dirname, "../dist/storybook")}`;

initStoryshots({
  suite: "Image storyshots",
  test: imageSnapshot({
    storybookUrl,
    getScreenshotOptions,
    beforeScreenshot,
    // framework: "react",
    // renderer: render,
  }),
});

jest.config.cjs

const JSON5 = require('json5');
const fs = require('fs');
const path = require('path');

const tsConfig = JSON5.parse(fs.readFileSync('./tsconfig.json').toString());

/**
 * Converts TypeScript path mappings to Jest moduleNameMapper format.
 * Because "@swc/jest" not supported aliases from ts config in 2023
 *
 * @returns {Object} An object where keys are paths in Jest format and values are corresponding paths in TypeScript format.
 *
 * Example:
 * Converts from:
 * "@/*": ["./src/*"]
 * To:
 * { '@/(.*)': '<rootDir>/src/$1' }
 */
function makeModuleNameMapper() {
  const { paths } = tsConfig.compilerOptions;

  return Object.entries(paths).reduce((aliases, [key, val]) => {
    const newKey = key.replace('/*', '/(.*)');
    const templatePath = val[0].replace('/*', '/$1');
    aliases[newKey] = path.join('<rootDir>', templatePath);
    return aliases;
  }, {"\\.scss$": 'identity-obj-proxy',});
}

module.exports = {
  testEnvironment: 'jest-environment-jsdom',
  collectCoverage: true,
  coverageReporters: ["text"],
  setupFilesAfterEnv: ['<rootDir>/src/shared/config/jest/jest-setup.ts'],
  coverageDirectory: 'dist/coverage',
  coverageThreshold: {
    global: {
      branches: 100,
      functions: 100,
      lines: 100,
      statements: 100,
    },
  },
  collectCoverageFrom: [
    'src/*/**/*.{ts,tsx}',
    '!**/node_modules/**',
    '!**/vendor/**',
    '!**/*.stories.*', // storybook
    '!**/*.meta.ts', // meta files
    '!src/app/**', // app config
    '!src/shared/config/**', // configs
  ],
  transform: {
    '^.+\\.stories\\.tsx?$': '@storybook/addon-storyshots/injectFileName',
    "^.+\\.(t|j)sx?$": "@swc/jest",
  },

  testPathIgnorePatterns: [
    "\\.e2e\\.spec\\.ts$", // e2e tests
  ],
  'moduleNameMapper': makeModuleNameMapper(),
};

@mihanizm56
Copy link

mihanizm56 commented Jun 5, 2023

@shilman Hi, have the same bug, why is this issue closed? The stable storybook 7.1.x was not released yet

@Sangrene
Copy link

Sangrene commented Jun 8, 2023

Still not working with 7.0.20.

@apomorska
Copy link

Why is this closed?

@rads92stx
Copy link

same problem

@slugmandrew
Copy link

Oh great, glad it's not just me then.

@EugeneKamikaZe
Copy link

doesn`t work today

@manuartero
Copy link

Same issue here 🤚 , in our case: React app + Vite + Storybook 7.0.26

"devDependencies": {
    "@storybook/addon-actions": "^7.0.26",
    "@storybook/addon-docs": "^7.0.26",
    "@storybook/addon-links": "^7.0.26",
    "@storybook/addon-storyshots": "^7.0.27",
    "@storybook/addon-storyshots-puppeteer": "^7.0.27",
    "@storybook/addons": "^7.0.26",
    "@storybook/react": "^7.0.26",
    "@storybook/react-vite": "^7.0.26",
    ...
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.6.1",
    "jest-environment-jsdom": "^29.6.1",
    "jest-transform-stub": "^2.0.0",
    "prettier": "2.2.1",
    "puppeteer": "^8.0.0",
    "react-test-renderer": "18.1.0",
    "sass": "^1.32.8",
    "storybook": "^7.0.26",
    "ts-jest": "^29.1.1",
    "typescript": "^4.2.4",
    "vite": "^4.4.2",
    "vite-plugin-svgr": "^3.2.0",
    "vite-tsconfig-paths": "^4.2.0"
  },

trying this storyshots.test.js:

import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';

/**
 * issue related to React 18 + Storybook 7.0
 *
 * @see https://github.com/storybookjs/storybook/issues/17985
 * @see https://github.com/storybookjs/storybook/issues/21652
 * @see https://github.com/storybookjs/storybook/issues/22179
 */

initStoryshots({ test: imageSnapshot() });

is raising this error:

$ jest --verbose --collectCoverage=false storyshots
 FAIL  src/storyshots.test.js
  ● Test suite failed to run

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

       9 |
      10 | // initStoryshots({ test: imageSnapshot() });
    > 11 | initStoryshots();
         |               ^
      12 |

      at node_modules/@storybook/addon-storyshots/dist/frameworks/react/loader.js:25:49
      at Object.load (node_modules/@storybook/addon-storyshots/dist/frameworks/react/loader.js:30: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> (src/storyshots.test.js:11:15)

@manbearwiz
Copy link
Contributor

@manuartero @Sangrene 7.1 has been released now which includes a fix for this.

YamazakiYusuke added a commit to YamazakiYusuke/tic-tac-toe that referenced this issue Jul 24, 2023
以下のエラーが発生
`TypeError: Cannot read properties of undefined (reading 'clientApi')`
storybookのversionを下げて対応
storybookjs/storybook#21652
@tonai
Copy link
Contributor

tonai commented Jul 25, 2023

I am also trying @storybook/addon-storyshots but still got the same error Cannot read properties of undefined (reading 'clientApi').
Using @storybook/addon-storyshots version 7.1.1

@manuartero
Copy link

@manuartero @Sangrene 7.1 has been released now which includes a fix for this.

I can say: i got this running when upgraded to 7.1 if anyone needs it i can share my config , but basically bumping to 7.1 did the trick.

thanks

@danilmakarow
Copy link

@manuartero @Sangrene 7.1 has been released now which includes a fix for this.

I can say: i got this running when upgraded to 7.1 if anyone needs it i can share my config , but basically bumping to 7.1 did the trick.

thanks

Yes, can you share your config pls?

@schmitt-christopher
Copy link

I have the same issue, tried with 7.1 and also just bumped to 7.2.1 put the problem still persists.
Would be also interested in the config. Thanks :)

@msisti
Copy link

msisti commented Aug 9, 2023

I was having the same issue with 7.2.1 but upgrading to 7.2.2 made it work for me in case that helps anyone 🤷‍♀️

@trainoasis
Copy link

I was having the same issue with 7.2.1 but upgrading to 7.2.2 made it work for me in case that helps anyone 🤷‍♀️

My CI tests for Dependabot PR Bump @storybook/react from 7.2.1 to 7.2.2 is failing with this, so it doesn't seem to fix it by itself.

@maximemolines
Copy link

Same issue here, tried today by upgrading to 7.2.3 but the problem still persists.

@juandinella
Copy link

Still not working on 7.3

@araysargsyan
Copy link

7.3.2 it will never work!!

@manuartero
Copy link

@danilmakarow

.storybook/main.js

const config = {
  stories: ['../src/**/*.stories.@(jsx|tsx)'],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  addons: ['@storybook/addon-actions', '@storybook/addon-docs', '@storybook/addon-links'],
  docs: {
    autodocs: false,
  },
};

export default config;

dependencies at package.json

{
  "devDependencies": {
    "@storybook/addon-actions": "7.1.1",
    "@storybook/addon-docs": "7.1.1",
    "@storybook/addon-links": "7.1.1",
    "@storybook/addon-storyshots": "7.1.1",
    "@storybook/addon-storyshots-puppeteer": "7.1.1",
    "@storybook/addons": "7.1.1",
    "@storybook/react": "7.1.1",
    "@storybook/react-vite": "7.1.1",
    ...
    "storybook": "7.1.1",
  },
  "resolutions": {
    "jackspeak": "2.1.1",
    "react-test-renderer": "18.1.0"
  }
}

referenced issue on a doc of mine:

@irangarcia
Copy link
Contributor

Not working on 7.4

@irangarcia
Copy link
Contributor

Solved by running: npm install @storybook/preview-api --save-dev

@shunfan
Copy link

shunfan commented Sep 26, 2023

I encountered the exact same error message on version 7.3.2.

Using npx [email protected] upgrade to upgrade all storybook related dependencies to 7.4.2 resolved the issue.

@richardxia
Copy link

I encountered the exact same error message on version 7.3.2.

Using npx [email protected] upgrade to upgrade all storybook related dependencies to 7.4.2 resolved the issue.

This helped fix the issue for me, and I was already on Storybook 7.4.1. Looks like upgrading Storybook through npx storybook upgrade even by a patch version can fix some nested dependency to avoid the error.

@mhdSid
Copy link

mhdSid commented Nov 8, 2023

Make sure to add framework property in initStoryshots.
vue | vue3 | angular | etc......

@sparmboy
Copy link

sparmboy commented Jan 12, 2024

Tried everything above but still not working on 7.6 for me....

Upgraded to jest 29.7 and now get the following error:

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

      1 | import initStoryshots from '@storybook/addon-storyshots';
    > 2 | initStoryshots();
        |               ^
      3 |

      at getSelectionSpecifierFromPath (node_modules/@storybook/react/node_modules/@storybook/preview-api/dist/index.js:66:1115)
      at new UrlStore (node_modules/@storybook/react/node_modules/@storybook/preview-api/dist/index.js:66:1627)
      at new PreviewWeb (node_modules/@storybook/react/node_modules/@storybook/preview-api/dist/index.js:69:1158)
      at start (node_modules/@storybook/react/node_modules/@storybook/preview-api/dist/index.js:90:2130)
      at Object.<anonymous> (node_modules/@storybook/react/dist/index.js:1:3109)
      at node_modules/@storybook/addon-storyshots/dist/frameworks/react/loader.js:30:32
      at Object.load (node_modules/@storybook/addon-storyshots/dist/frameworks/react/loader.js:36: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> (src/storybook.test.ts:2:15)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.