DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

[camtheperson]

"@percy/storybook": "^3.3.1"

After building Storybook and running percy-storybook --widths=320,1280 --debug, I get the following error:

Error:  Error: Evaluation failed: Error: Storybook object not found on window. Open your storybook and check the console for errors.
    at checkStories (__puppeteer_evaluation_script__:23:16)
    at __puppeteer_evaluation_script__:20:11
    at ExecutionContext._evaluateInternal (/Users/camh/Sites/ssr-frontend/apps/unified-checkout/node_modules/puppeteer/lib/ExecutionContext.js:81:15)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async ExecutionContext.evaluate (/Users/camh/Sites/ssr-frontend/apps/unified-checkout/node_modules/puppeteer/lib/ExecutionContext.js:48:12)
  -- ASYNC --
    at ExecutionContext.<anonymous> (/Users/camh/Sites/ssr-frontend/apps/unified-checkout/node_modules/puppeteer/lib/helper.js:111:15)
    at DOMWorld.evaluate (/Users/camh/Sites/ssr-frontend/apps/unified-checkout/node_modules/puppeteer/lib/DOMWorld.js:112:20)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
  -- ASYNC --
    at Frame.<anonymous> (/Users/camh/Sites/ssr-frontend/apps/unified-checkout/node_modules/puppeteer/lib/helper.js:111:15)
    at Page.evaluate (/Users/camh/Sites/ssr-frontend/apps/unified-checkout/node_modules/puppeteer/lib/Page.js:833:43)
    at Page.<anonymous> (/Users/camh/Sites/ssr-frontend/apps/unified-checkout/node_modules/puppeteer/lib/helper.js:112:23)
    at _callee$ (/Users/camh/Sites/ssr-frontend/apps/unified-checkout/node_modules/@percy/storybook/lib/getStories.js:64:25)
    at tryCatch (/Users/camh/Sites/ssr-frontend/apps/unified-checkout/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/Users/camh/Sites/ssr-frontend/apps/unified-checkout/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.<computed> [as next] (/Users/camh/Sites/ssr-frontend/apps/unified-checkout/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/Users/camh/Sites/ssr-frontend/apps/unified-checkout/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /Users/camh/Sites/ssr-frontend/apps/unified-checkout/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13

From here, I open the storybook-static index file, and I'm seeing the following in the console:

Adding a click listener to iframe failed:  DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

Screenshot:

Any ideas?

[Robdel12]

Hey @camtheperson! That warning is probably pretty irrelevant here. 🤔 Is that screenshot from the page fully loaded? When this is logged:

Error: Error: Evaluation failed: Error: Storybook object not found on window. Open your storybook and check the console for errors.

It means we weren't able to open that index file and pick off the stories from the window object: window['__STORYBOOK_CLIENT_API__'].

[camtheperson]

Howdy @Robdel12. Yes, the page is fully loaded.

It may be worth noting that I'm accessing that page via file path, i.e. file:///Users/camh/Sites/ssr-frontend/apps/unified-checkout/storybook-static/index.html?path=/story/*.

I noticed some similarities in this issue/comment: storybookjs/storybook#7215 (comment). The comment below mentions the need to run a web server, but I'm not exactly sure what to do from here.

[Robdel12]

When the page is fully loaded, can you access that global var in the console? What does it print? https://docs.percy.io/docs/storybook#debugging-locally

It's also possible the static folder path is different too. Percy loads that static output, starts a local server, opens the index file, and tries to grab the window var. From there, everything else is done in node.

[camtheperson]

@Robdel12 I think I've made some progress.

In our repo, we've abstracted Storybook as a dependency and it's configuration through a tool called pixeloven.

Our tool uses the following command to build Storybook: pixeloven story build. From here, a static version of Storybook is built into a stories directory.

So essentially, when I build storybook using build-storybook and navigate to storybook-static, it doesn't work. Perhaps because our config is abstracted through pixeloven-storybook or something.

However, when I build storybook using pixeloven story build, and then navigate to the version created in stories, that version renders correctly.

So I'm curious if there is a way to tell the percy-storybook command to look in stories instead of storybook-static?

[camtheperson]

Derp. Nevermind.

--build_dir=stories

[Robdel12]

Sweet! Super happy that helped get you going in the right direction :D