unable to install percy-storybook

[hamisharro-e2x]

The problem

I am having trouble with installing percy-storybook, I have followed the set-up documentation and cannot get it to work with our storybook in any variation. I have tried a few different versions of @percy/cli and @percy/storybook as I haven't been able to find a recommended configuration for storybook 6.4.20, all the errors below are from using the versions in the dependencies. I have downloaded the example-percy-storybook repo and have no problems running it locally. I am unable to provide access to the repository and will try to reproduce the problem, and share it if I can.

Environment

• Node version: v16.14.2
• OS version: macos 12.4
• Type of shell command-line [interface]: zsh 5.8.1 (x86_64-apple-darwin21.0)
• Dependencies:

 "devDependencies": {
    "@chanzuckerberg/axe-storybook-testing": "^5.0.0",
    "@percy/cli": "1.5.1",
    "@percy/storybook": "4.3.0",
    "@storybook/addon-a11y": "^6.4.20",
    "@storybook/addon-actions": "^6.4.20",
    "@storybook/addon-essentials": "^6.4.20",
    "@storybook/addon-interactions": "^6.4.20",
    "@storybook/addon-links": "^6.4.20",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/addon-viewport": "^6.4.22",
    "@storybook/builder-vite": "^0.1.24",
    "@storybook/react": "^6.4.20",
    "@storybook/test-runner": "^0.0.7",
    "@storybook/testing-library": "^0.0.9",
    "@storybook/testing-react": "^1.2.4",
    "@svgr/cli": "^6.2.1",
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/forms": "^0.5.0",
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^13.0.0",
    "@testing-library/react-hooks": "^8.0.1",
    "@testing-library/user-event": "^14.2.0",
    "@types/jest": "^27.4.1",
    "@types/jest-axe": "^3.5.3",
    "@types/node": "^17.0.23",
    "@types/react": "^17.0.43",
    "@types/react-dom": "^17.0.14",
    "@vitejs/plugin-react": "^1.3.0",
    "@vitejs/plugin-react-refresh": "^1.3.6",
    "autoprefixer": "^10.4.4",
    "axe-core": "^4.4.2",
    "babel-jest": "^27.5.1",
    "concurrently": "^7.1.0",
    "cross-env": "^7.0.3",
    "eslint-plugin-jest": "^26.1.3",
    "eslint-plugin-prettier": "^4.0.0",
    "global": "^4.4.0",
    "http-server": "^14.1.0",
    "jest": "^27.5.1",
    "jest-axe": "^6.0.0",
    "jest-css-modules": "^2.1.0",
    "jest-transform-stub": "^2.0.0",
    "next": "^12.1.6",
    "postcss": "^8.4.12",
    "postcss-cli": "^9.1.0",
    "postcss-import": "^14.1.0",
    "postcss-nesting": "^10.1.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-test-renderer": "^18.0.0",
    "storybook-addon-pseudo-states": "^1.14.0",
    "tailwindcss": "^3.0.23",
    "ts-jest": "^27.1.4",
    "ts-node": "^10.7.0",
    "typescript": "^4.6.3",
    "vite": "^2.9.1",
    "vite-jest": "^0.1.4",
    "vite-plugin-dts": "^1.0.5",
    "vite-plugin-svgr": "^2.1.0",
    "wait-on": "^6.0.1"
  },
  "dependencies": {
    "@headlessui/react": "^1.5.0",
    "@heroicons/react": "^1.0.6",
    "@testing-library/dom": "^8.14.0",
    "@testing-library/react-hooks": "^8.0.1",
    "domutils": "^3.0.1",
    "html-react-parser": "^1.4.14"
  },
  "peerDependencies": {
    "next": "^12.1.6",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "tailwindcss": "^3.0.23"
  }

Debug logs

Errors from percy storybook:start -v:

• Intermittently changing, not sure why.

[percy] Stopping percy...
[percy] Build not created
[percy] Error: Storybook object not found on the window. Open Storybook and check the console for errors.

[percy] Stopping percy...
[percy] Build not created
[percy] Error: TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at GlobalsStore2.update (http://localhost:9000/node_modules/.vite-storybook/deps/chunk-COKMFJSF.js?v=dc791890:1402:18)
    at PreviewWeb2.onUpdateGlobals (http://localhost:9000/node_modules/.vite-storybook/deps/chunk-BN6ALAM6.js?v=dc791890:1347:35)
    at http://localhost:9000/node_modules/.vite-storybook/deps/chunk-23NSCULW.js?v=dc791890:225:18
    at Array.forEach (<anonymous>)
    at Channel2.handleEvent (http://localhost:9000/node_modules/.vite-storybook/deps/chunk-23NSCULW.js?v=dc791890:224:23)
    at handler2 (http://localhost:9000/node_modules/.vite-storybook/deps/chunk-23NSCULW.js?v=dc791890:154:20)
    at Channel2.emit (http://localhost:9000/node_modules/.vite-storybook/deps/chunk-23NSCULW.js?v=dc791890:159:13)
    at <anonymous>:21:13

Errors from percy storybook ./storybook-static -v:

• Intermittently changing, not sure why.

[percy] Percy has started!
[percy:storybook] Requesting Storybook: http://localhost:51458 (0ms)
[percy] Stopping percy...
[percy] Build not created
[percy] Error: TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at e.value (http://localhost:51458/assets/iframe.e9985552.js:3798:20)
    at e.value (http://localhost:51458/assets/iframe.e9985552.js:13341:37)
    at http://localhost:51458/assets/iframe.e9985552.js:1177:19
    at Array.forEach (<anonymous>)
    at e.value (http://localhost:51458/assets/iframe.e9985552.js:1176:17)
    at l (http://localhost:51458/assets/iframe.e9985552.js:1104:56)
    at e.value (http://localhost:51458/assets/iframe.e9985552.js:1106:46)
    at <anonymous>:21:13

[percy] Percy has started!
[percy:storybook] Requesting Storybook: http://localhost:57527 (0ms)
[percy] Stopping percy...
[percy] Build not created
[percy] Error: Storybook object not found on the window. Open Storybook and check the console for errors.

Errors from percy storybook http://localhost:6006 -v:

start-storybook -p 6006

[percy] Percy has started!
[percy:storybook] Requesting Storybook: http://localhost:6006 (0ms)
[percy] Stopping percy...
[percy] Build not created
[percy] Error: Storybook object not found on the window. Open Storybook and check the console for errors.

http-server storybook-static --port 6006 --silent

[percy] Percy has started!
[percy:storybook] Requesting Storybook: http://localhost:6006 (0ms)
[percy] Stopping percy...
[percy] Build not created
[percy] Error: TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at e.value (http://localhost:6006/assets/iframe.e9985552.js:3798:20)
    at e.value (http://localhost:6006/assets/iframe.e9985552.js:13341:37)
    at http://localhost:6006/assets/iframe.e9985552.js:1177:19
    at Array.forEach (<anonymous>)
    at e.value (http://localhost:6006/assets/iframe.e9985552.js:1176:17)
    at l (http://localhost:6006/assets/iframe.e9985552.js:1104:56)
    at e.value (http://localhost:6006/assets/iframe.e9985552.js:1106:46)
    at <anonymous>:21:13

[Robdel12]

Hey @hamisharro-e2x! Most of these errors aren't coming from Percy but from your storybook build output (there's no Percy in those error stack traces). This error does mean something to us, though:

[percy] Error: Storybook object not found on the window. Open Storybook and check the console for errors.

That means we're not able to find any stories using the methods storybook provides:

percy-storybook/src/utils.js

Lines 92 to 94 in 9feeba3

	await (window.__STORYBOOK_PREVIEW__?.extract?.() ||
	window.__STORYBOOK_STORY_STORE__?.extract?.());
	return window.__STORYBOOK_STORY_STORE__.raw();

If you open your storybook static build output locally, what is rendered and what's in the console? What's the value of those variables on the window object?

[hamisharro-e2x]

Hi @Robdel12, thanks for responding so quickly, I have found both objects on the window when using storybook-static, and have attached them to this response, everything looks okay to me, but I am not too sure!

window.zip