[Bug]: TypeError: Cannot read properties of undefined (reading 'clientApi') #21652
Comments
|
Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. Thank you! 🙏 |
|
@shilman With |
|
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 Seems like the error is coming from here Test is pretty simple 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')}`,
}),
}); |
|
Assuming this is the cause of that first warning 
|
|
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 |
|
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 |
Hi, would you happen to have a working example? because v7.1.0-alpha10 I got error:
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(),
}; |
|
@shilman Hi, have the same bug, why is this issue closed? The stable storybook 7.1.x was not released yet |
|
Still not working with 7.0.20. |
|
Why is this closed? |
|
same problem |
|
Oh great, glad it's not just me then. |
|
doesn`t work today |
|
Same issue here 🤚 , in our case: React app + Vite + Storybook "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 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) |
|
@manuartero @Sangrene 7.1 has been released now which includes a fix for this. |
以下のエラーが発生 `TypeError: Cannot read properties of undefined (reading 'clientApi')` storybookのversionを下げて対応 storybookjs/storybook#21652
|
I am also trying |
I can say: i got this running when upgraded to thanks |
Yes, can you share your config pls? |
|
I have the same issue, tried with 7.1 and also just bumped to 7.2.1 put the problem still persists. |
|
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 |
|
Same issue here, tried today by upgrading to 7.2.3 but the problem still persists. |
|
Still not working on 7.3 |
|
7.3.2 it will never work!! |
|
.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 {
"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: |
|
Not working on |
|
Solved by running: |
|
I encountered the exact same error message on version Using |
This helped fix the issue for me, and I was already on Storybook 7.4.1. Looks like upgrading Storybook through |
|
Make sure to add |
|
Tried everything above but still not working on Upgraded to jest |
and others
Describe the bug
After trying to update to storybook@7.0.0-rc.4 for TS 5.0 support, I'm seeing
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.3The text was updated successfully, but these errors were encountered: