when running storybook with npm Ref does not seem to resolve, no output in shell console.

Browser - Firefox Developer, OS Mac Mojave

I’m trying to use the storybook composability functionality in the latest release , I am on storybook/react v6.0.18 - both the storybook that is referencing and the referenced storybook are the same version.

Both storybooks run with npm.

I have two projects - one running on localhost:6006 the other at localhost:6007.

The localhost:6006 is trying to refer to localhost:6007 this is my make.js for localhost:6006

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  refs: {
     astronomisk: { 
       title: "Astronomisk Selskab", 
       url: "http://localhost:6007"
     }
    },
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
      },
    },
  ]
}

The storybook running on localhost:6007 looks fine by itself. But in localhost:6006 when I look at it the left panel where the ref should be shows the title “astronomisk selskab” is present , and 5 placeholders for components to load (gray boxes, animated to imply that they are loading)

The following error is being thrown clientside

Uncaught DOMException: Permission denied to access property “document” on cross-origin object DocumentFormatting.js:154

there is no output in either shell console, so it seems completely a clientside issue.

If I run with Yarn I do not have this issue.

[rmknecht]

Double checked with @IanVS recommendation and still see the parent storybook “hanging.” The referenced storybooks load normally when opened directly.

I’m building ~7 storybooks from within a mono-repo, and referencing them from a parent storybook that doesn’t contain any stories itself. Each storybook is served from the same host, statically. Storybooks include addons such as a11y, knobs, links, and actions.

Following up to my previous comment as I’ve resolved the my issue:

• Added features: { buildStoriesJson: true } to my storybook’s main.js configuration
• Created a single “blank” story entry for the parent/host storybook

[apete343]

hrm, i made a simple test here: https://github.com/apete343/storybook-ref-test

And the refs to localhost work as expected. So not sure what my issue is in the real life scenario yet.

I notice in the test case there are no CORS errors in the console, but in the real life case, there are, just as in the screenshot.